Tried html5 to upload and display image on canvas. Mostly example only works on Firefox. After looking around tried the FileReader method. Both Firefox and Chrome supports the FileReader object. IE still not supporting this object at the moment. Maybe in the next IE version. Anyway below is the javascript to upload and display image on canvas. Tested on jboss 7 server. Won't work if not run on server though.
<script>
function handleFileSelect(files) {
for ( var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var img = document.createElement("img");
img.src = e.target.result;
img.onload = function() {
var canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
}
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
</script>
<body>
<input type="file" id="files" name="files[]" multiple onchange="handleFileSelect(this.files)"/>
<canvas id="myCanvas" width="778" height="600"></canvas>
</body>
No comments:
Post a Comment