canvas-image-uploader
Version:
Resize and rotate images by EXIF orientation on the client side during upload. This uses the HTML Canvas element and HTML5 FileReader.
50 lines (48 loc) • 1.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
</head>
<body>
<form>
<input type="file" name="file" id="file">
<canvas width="200" height="200"></canvas>
</form>
<script src="node_modules/exif-js/exif.js"></script>
<script src="canvas-image-uploader.js"></script>
<script>
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) {
}
});
}
</script>
</body>
</html>