ドラッグアンドドロップした画像をcanvasに描画する
canvasにローカルの画像ファイルを描画するには - 技術めもとほぼ同じ処理です。
画像の選択をinput type="file"で対応していたのを、ドラッグアンドドロップでできるようにしただけです。
仕様の概要はこんな感じです
- ドラッグアンドドロップしたローカルファイルを参照すること
- 参照した画像ファイルをcanvasに描画すること
- ローカルで完結すること
ソースは以下の通り
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); });