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

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/24 13:41