<!DOCTYPE html> 
<html lang="en"> 
    <head>
        <meta charset="utf-8" />
        <title>jQuery canvasResize Plugin</title>
        <meta name="description" content="jQuery Canvas Resize Plugin. It's compatible with iOS6 and Android 2.3+" />
        <meta name="keywords" content="javascript, jquery, canvas, image, resize" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link type="text/plain" rel="author" href="http://gokercebeci.com/humans.txt" />
        <link rel="shortcut icon" href="http://gokercebeci.com/favicon.ico" type="image/x-icon" />
        <style>
            body { margin: 0; padding: 0; color:#333; font: normal 13px/1.264 sans-serif; }
            img { border:0 }
            .clearfix { clear:both; }
            #devcontainer { margin: 20px auto; padding: 0 10px; width: 940px; }
            pre, code { 
                display: block;
                padding: 10px;
                color: #eee;
                border: 1px solid #222;
                background: #333;
                font-family: monospace, monospace; 
                _font-family: 'courier new', monospace; 
                font-size: 1em;
            }
            #area { float:left; width: 480px; }
            .desc { float:right; width: 440px; }
            .signature a { color:#555; text-decoration:none; }
            .signature img { margin-right:5px; vertical-align: middle; }
        </style>
        <!-- jquery -->
        <script src="jquery-1.7.2.min.js"></script>
    </head>
    <body>
        <div id="devcontainer">
            <!-- development area -->

            <!-- SAMPLE -->
            <section>
                <h2>SAMPLE</h2>
                <!-- description -->
                <div class="desc">
                    <h1>jQuery canvasResize v1.2.0</h1>
                    <hr>
                    <p><b>canvasResize</b> is a plugin for client side image resizing.</p>
                    <p>It's compatible with iOS6</p>
                    <p>I fixed iOS6 Safari's image file rendering issue for large size image (over mega-pixel)
                        using few functions from 
                        <a href="https://github.com/stomita/ios-imagefile-megapixel">ios-imagefile-megapixel</a><br/>
                        And fixed orientation issue by using edited 
                        <a href="http://blog.nihilogic.dk/2008/05/jquery-exif-data-plugin.html">jQuery EXIF data plugin</a>
                    <p><b>* Sorry, server side uploading option  does not work on gokercebeci.com. You can test it on your own server.</b></p>
                    <p>I've only tested it on</p>
                    <ul>
                        <li><b>Chromium (24.0.1312.56)</b>, </li>
                        <li><b>Google Chrome (25.0.1364.68 beta)</b>, </li>
                        <li><b>Opera (12.14)</b>, </li>
                        <li><b>IOS 6.1.2</b></li>
                    </ul>
                    <p>and it works enough for me for now!</p>
                    <p>It is under MIT License and It requires "binaryajax.js" and "exif.js" to work which is also under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]</p>
                    <p class="signature"><a href="http://gokercebeci.com/dev/" title="developer">
                            <img src="http://geticon.org/of/gokercebeci.com" alt="developer" />
                            goker.cebeci, the developer</a></p>
                    <p class="signature"><a href="https://github.com/gokercebeci/canvasResize">
                            <img src="http://geticon.org/of/github.com" alt="github" />
                            fork it on github</a></p>
                </div>
                <!-- /description -->
                <style>
                    #area div p { display: block; width: 300px; }
                    #area div p span { display: block; padding: 2px 0; width: 0; background: #193; text-align: center; }
                    #area b, #area img { display: block; }
                    #area img { margin: 10px 0; width: 300px; }
                    #area input { visibility: hidden; height: 0; }
                    #area u { display: block; padding: 15px; text-align: center; background: #ddd; border-radius: 6px; }
                </style>
                <div id="area">
                    <h3>canvasResize</h3>

                    <div>
                        <input name="photo" type="file"/>
                        <u>Choose file</u>
                        <p><span></span></p>
                        <i></i>
                    </div>
                    <script>

                        $().ready(function() {

                            $('#area u').click(function() {
                                $('input[name=photo]').trigger('click');
                            });

                            $('input[name=photo]').change(function(e) {
                                var file = e.target.files[0];

                                // RESET
                                $('#area p span').css('width', 0 + "%").html('');
                                $('#area img, #area canvas').remove();
                                $('#area i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));


// CANVAS RESIZING
                                $.canvasResize(file, {
                                    width: 300,
                                    height: 0,
                                    crop: false,
                                    quality: 80,
                                    //rotate: 90,
                                    callback: function(data, width, height) {

                                        // SHOW AS AN IMAGE
                                        // =================================================

                                        $('<img>').load(function() {

                                            $(this).css({
                                                'margin': '10px auto',
                                                'width': width,
                                                'height': height
                                            }).appendTo('#area div');

                                        }).attr('src', data);

                                        // /SHOW AS AN IMAGE
                                        // =================================================

                                        // IMAGE UPLOADING
                                        // =================================================

                                        // Create a new formdata
                                        var fd = new FormData();
                                        // Add file data
                                        var f = $.canvasResize('dataURLtoBlob', data);
                                        f.name = file.name;
                                        fd.append($('#area input').attr('name'), f);

                                        $.ajax({
                                            url: 'uploader.php',
                                            type: 'POST',
                                            data: fd,
                                            dataType: 'json',
                                            contentType: false,
                                            processData: false,
                                            beforeSend: function(xhr) {
                                                xhr.setRequestHeader("pragma", "no-cache");
                                            },
                                            xhr: function() {
                                                var xhr = new window.XMLHttpRequest();
                                                //Upload progress
                                                xhr.upload.addEventListener("progress", function(e) {
                                                    if (e.lengthComputable) {
                                                        var loaded = Math.ceil((e.loaded / e.total) * 100);
                                                        $('p span').css({
                                                            'width': loaded + "%"
                                                        }).html(loaded + "%");
                                                    }
                                                }, false);
                                                return xhr;
                                            }
                                        }).done(function(response) {

                                            //console.log(response);
                                            if (response.filename) {
                                                // Complete
                                                $('#area p span').html('done');
                                                $('#area b').html(response.filename);
                                                $('<img>').attr({
                                                    'src': response.filename
                                                })
                                                        .appendTo($('#area div'));
                                            }

                                        });

                                        // /IMAGE UPLOADING
                                        // =================================================               
                                    }
                                });

                            });
                        });
                    </script>

                    <script src="jquery.exif.js"></script>
                    <script src="jquery.canvasResize.js"></script>
                    <script src="canvasResize.js"></script>
                </div>
                <div class="clearfix"></div>
            </section>
            <!-- SAMPLE -->

            <!-- USAGE -->
            <section>
                <h2>USAGE</h2>
                <pre><code>
$('input[name=photo]').change(function(e) {
    var file = e.target.files[0];
    $.canvasResize(file, {
        width: 300,
        height: 0,
        crop: false,
        quality: 80,
        //rotate: 90,
        callback: function(data, width, height) {
            $(img).attr('src', data);
        }
    });
});
                </code></pre>
            </section>
            <!-- /USAGE -->
            <!-- OPTIONS -->
            <section>
                <h2>OPTIONS</h2>
                <pre><code>
width    : 300,     // Image width.
height   : 0,       // Image height, default 0 (flexible).
crop     : false,   // default false.
quality  : 80,      // Image quality default 80.
rotate   : 90,      // Image rotation default 0
callback : function(){},
                </code></pre>
            </section>
            <!-- /OPTIONS -->

            <!-- /development area -->
        </div>
    </body>
</html> 
