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.

$3

Upload image to canvas via file input.

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 = $('');
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) {
}
});
}

$3

Add a preview canvas to your HTML.

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