mrharel / canvasimageuploader

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

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);
});