Edit in JSFiddle

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: