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 );

通过类不工作将图像添加到画布

1 个答案: