通過類不工作將圖像添加到畫布

Question

我有一個用戶單擊的圖像模板，然後必須將該圖像添加到畫布。我可以使用ID和document.getElementById添加它，但是當我嘗試通過document.getElementsByClassName添加它時，我無法使其正常工作。有人能提出一些建議嗎

HTML

<img style="cursor:pointer;width:90px;height:120px;" class="img" src="designs/01.png"> 
<img style="cursor:pointer;width:90px;height:120px;" class="img" src="designs/02.png"> 
<img style="cursor:pointer;width:90px;height:120px;" class="img" src="designs/03.png"> 

的JavaScript

document.getElementsByClassName('img').onclick = function() { 
    var imgElement = $(this).attr("src"); 
    var imgInstance = new fabric.Image(imgElement, { 
     left: 100, 
     top: 100, 
     angle: 0, 
    }); 

    canvas.add(imgInstance); 
} 

Answer 1

試試這個。

$(".img").click(function(){ 
    var imgElement = $(this).attr("src"); 
    fabric.Image.fromURL(imgElement , function(img) { 
    canvas.add(img); 
    img.center(); 
    }); 
}); 

，並確保您的圖片網址是在點擊檢索，加入這行，檢查控制檯值

var imgElement = $(this).attr("src"); 
console.log(imgElement);