ドラッグアンドドロップした画像をcanvasに描画する

canvasにローカルの画像ファイルを描画するには - 技術めもとほぼ同じ処理です。

画像の選択をinput type="file"で対応していたのを、ドラッグアンドドロップでできるようにしただけです。


仕様の概要はこんな感じです


ソースは以下の通り

HTML

  <div id="drawArea">
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </div>
  <div id="uploadArea">
    <input id="uploadFile" name="image" type="file" />
  </div>

javascript

  // ドラッグ要素がドロップ要素に重なっている間
  window.addEventListener("dragover", function(evt) {
    evt.preventDefault();  // ブラウザのデフォルトの画像表示処理をOFF
  }, false);

  // ドロップ時
  window.addEventListener("drop", function(evt) {
    var canvas = $("#myCanvas");
    var ctx = canvas[0].getContext("2d");

    evt.preventDefault();  // ブラウザのデフォルトの画像表示処理をOFF
    var file = evt.dataTransfer.files[0];

    if (!file.type.match(/^image\/(png|jpeg|gif)$/)) return;

    var image = new Image();
    var reader = new FileReader();

    reader.onload = function(evt) {
      image.onload = function() {
        ctx.drawImage(image, 0, 0);
      }
      image.src = evt.target.result;
    }
    reader.readAsDataURL(file);
  });