canvasに画像貼り付け

 javascriptでcanvasへ画像貼り付けできないか試してみた。

canvasで、右クリック貼り付けとしたかったのですが、うまくいかず。

とりあえず、div要素をクリック後、CTRL+Vで貼り付けしてみたらなんとか動作した。

HTMLには

<div id="paste">click here & paste(CTRL+V)</div>

<canvas id="cvs" width="950" height="800"></canvas>

http://blog.livedoor.jp/philipdayon/archives/1045591761.html　を参考にさせていただきました。

var canvas = document.getElementById('cvs') var pst1=document.getElementById("paste") pst1.addEventListener('paste', pste,false); function pste(e){ var i; //クリップボードに含まれる画像データを検索 var items = e.clipboardData.items; var imageItem = null; for(i = 0; i < items.length; i++) { if(items[i].type.indexOf("image/") != -1) { imageItem = items[i]; break; } } if(! imageItem) { alert("clipboard does not contain an image."); return; } //clipboardData.items -> Blob -> Image の順に変換 var blob = imageItem.getAsFile(); var blobURL = window.URL.createObjectURL(blob); var img = new Image(); img.onload = function() { //Imageをキャンバスに描画 var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); }; img.src = blobURL; }