Skip to content

Instantly share code, notes, and snippets.

@oreoshake
Created November 10, 2015 00:38
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save oreoshake/ccb3d14d7292f56ca0ef to your computer and use it in GitHub Desktop.
Save oreoshake/ccb3d14d7292f56ca0ef to your computer and use it in GitHub Desktop.
Take a file input, paint the image to a canvas, display it, read the canvas data, and POST the canvas data as an image file.
<input type="file" id="input"><br>
<img id="output">
<canvas id="canvas" style="display:none"></canvas>
<script>
// from http://stackoverflow.com/questions/19032406/convert-html5-canvas-into-file-to-be-uploaded
function uploadCanvas(dataURL) {
var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
var file=new Blob([new Uint8Array(array)], {type: 'image/png'});
var formdata = new FormData();
formdata.append("image", file);
$.ajax({
url: "/asdfs/zlock",
type: "POST",
data: formdata,
processData: false, // important
contentType: false // important
}).complete(function(response){
console.log(response.status);
});
}
var input, canvas, context, output;
input = document.getElementById("input");
canvas = document.getElementById("canvas");
context = canvas.getContext('2d');
output = document.getElementById("output");
input.addEventListener("change", function() {
var reader = new FileReader();
reader.addEventListener("loadend", function(arg) {
var src_image = new Image();
src_image.onload = function() {
canvas.height = src_image.height;
canvas.width = src_image.width;
context.drawImage(src_image, 0, 0);
var imageData = canvas.toDataURL("image/png");
output.src = imageData;
uploadCanvas(imageData);
}
src_image.src = this.result;
});
reader.readAsDataURL(this.files[0]);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment