function showImage(file) {
var start = Date.now();
var url = (window.URL || window.webkitURL).createObjectURL(file);
var img = document.createElement('img');
img.onload = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var end = Date.now();
var diff = end - start;
$('#time').html(diff);
$('#output').html(canvas);
};
img.src = url;
}
function showError(message) {
alert(message);
}
$('#file').on('change', function (event) {
var file = event.target.files[0];
showImage(file);
});
$('#drop-zone').on('dragover', function (jqEvent) {
var event = jqEvent.originalEvent;
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}).on('drop', function (jqEvent) {
var event = jqEvent.originalEvent;
event.stopPropagation();
event.preventDefault();
var file = event.dataTransfer.files[0];
showImage(file);
});
<div class="container">
<div class="page-header">
<h1>image decoder~~~~</h1>
</div>
<div class="well">
<input type="file" id="file" name="files" />
<div id="drop-zone">or drop an image file here</div>
</div>
<div class="well">
<div><span id="time"></span>ms</div>
<div id="output"></div>
</div>
</div>
#drop-zone {
border: 2px dashed rgb(187, 187, 187);
border-radius: 5px 5px 5px 5px;
padding: 50px;
text-align: center;
color: rgb(87, 87, 87);
}
canvas {
max-width: 100%;
}
External resources loaded into this fiddle: