canvas-image-uploader

CanvasImageUploader

Resize and rotate images by EXIF orientation on the client side during upload. This uses the HTML Canvas element and HTML5 FileReader.

Use

Require from npm: npm install canvas-image-uploader --save

Or, if you just want to include the Javascript file in your HTML, make sure to also include https://github.com/jseidelin/exif-js, before CanvasImageUploader.

<script src="exif-js/exif.js"></script>
<script src="canvas-image-uploader.js"></script>

Basic file upload

Upload image to canvas via file input.

<input type="file" name="file" id="file">

Javascript:

var uploader = new CanvasImageUploader({
    maxSize: 1500,
    jpegQuality: 0.7
});

$('#file').bind('change', function onImageChanged(e) {
    var files = e.target.files || e.dataTransfer.files;
    if (files) {
        file = files[0];
        var $canvas = $('<canvas>');
        uploader.readImageToCanvas(file, $canvas, function () {
            uploader.saveCanvasToImageData($canvas[0]);
        });
    }
});

// Upload the file data
function onFormSubmit() {
    $.ajax({
        type: 'POST',
        url: 'http://...',
        data: uploader.getImageData(),
        beforeSend: function (request) {
            request.setRequestHeader("Content-Type", ".jpg");
        },
        processData: false,
        success: function (result) {
        },
        error: function (error) {
        }
    });
}

Show a preview of the image

Add a preview canvas to your HTML.

<canvas id="preview-canvas" height="0" width="0"></canvas>

Javascript:

uploader.readImageToCanvas(file, $canvas, function () {
    var canvas = $canvas[0];
    // Render the preview from your original canvas...
    uploader.copyToCanvas(canvas, $('#preview-canvas'), MAX_PREVIEW_SIZE);
    uploader.saveCanvasToImageData(canvas);
});