Web 上で画像をゴニョゴニョするツール作る時などに使えるかと思います.

Demo

画像を ドラッグ & ドロップ すると Canvas 上にその画像を描画します.

Code

HTML

<canvas id='world' width='320' height='320'></canvas>  

JavaScript

window.onload = function() {  
  var canvas = document.querySelector('#world');
  var ctx = canvas.getContext('2d');
  var render = function(image) {
    ctx.drawImage(image, 0, 0);
  };

  var cancelEvent = function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  };

  document.addEventListener("dragover", cancelEvent, false);
  document.addEventListener("dragenter", cancelEvent, false);
  document.addEventListener("drop", function(e) {
    e.preventDefault();

    var file = e.dataTransfer.files[0];
    var image = new Image();
    image.onload = function() {
      render(this);
    };

    var reader = new FileReader();
    reader.onload = function(e) {
      image.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }, false);
};

Detail

1. dragover, dragenter, drop のデフォルト処理をそれぞれキャンセル
2. drop で受け取った file を FileReader の readAsDataURL() 経由で読み込む
3. コールバックでファイルの DataURIScheme を受け取って image.src に代入
4. image のコールバックで Canvas 上に画像を描画