バニラでのコーディングを勉強中です。
読み込んだ画像に対してaddEventListenerで「クリックしたらcanvasに描画」を記述したいと思っています。canvasにはfabricを使っていますが、今回の質問には関連しないと思います。
javascript
document.getElementById( "target" ).addEventListener( "change", function() { var fileList = this.files ; var num = 100; for( var i=0,l=fileList.length; l>i; i++ ) { var blobUrl = window.URL.createObjectURL( fileList[i] ) ; document.getElementById('Hikidasi').insertAdjacentHTML('beforeend','<img id="' + i + '" class="Htool" src="' + blobUrl + '" style="width:5vw">'); document.querySelectorAll('.Htool').forEach(function(cards){ cards.addEventListener('click',function(){ console.log(cards.src); fabric.Image.fromURL(cards.src, function(oImg) { oImg.scaleToWidth(Can.width*0.1); oImg.set('left', Can.width*0.3); oImg.set('top', Can.height*0.3); Can.add(oImg); }); }); }); } });
目的通り読み込んだ画像をクリックでcanvasへの描画はできましたが、forEachで回しているからだと思いますが、1個目の画像は1回、6個目の画像は6回分Can.add(oImg)されてしまいます。
querySelectorAllへのイベントなのでforEachを使っていますが、これが原因だと思いますが、解決策がわかりません。
すべて1回の描画に収めるのはどのようにすればよいでしょうか。
まだ回答がついていません
会員登録して回答してみよう