Javascript 单击Fabric.js画布时，如何获取图像的src？

我正在用Fabricjs制作一个网站。一个div将是画布，另一个将有很多图像（数百）。我希望能够点击图像，使它们在画布上弹出。我的问题是,；如何在单击时获取图像的src，以便img节点进入canvas节点。我应该做一个加法器数组。。。对于每个图像

（用javascript编写）

一如既往地感谢：）

海关

您不需要在每个图像上单击

onclick

，您可以将jQuery事件处理程序附加到所有图像，并获取它们的

src

属性（当单击图像时，这会将图像

src

输出到控制台）：

---

您不需要在每个图像上单击

onclick

，您可以将jQuery事件处理程序附加到所有图像，并获取它们的

src

属性（当单击图像时，这会将图像

src

输出到控制台）：

---

您不必为每个img声明onclick

试试这个：

$("#images img").click(function() {
    var getsource = $(this).attr("src");
    alert(getsource);
});

---

您不必为每个img声明onclick

试试这个：

$("#images img").click(function() {
    var getsource = $(this).attr("src");
    alert(getsource);
});

---

您可以为upper DIV设置retrieve of SRC only attaching事件（使用JS），如下所示：

       <div id="images" onclick="getSelectedImageURL(event);">
                        <input type="image"   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                    </div>

---

您可以为upper DIV设置retrieve of SRC only attaching事件（使用JS），如下所示：

       <div id="images" onclick="getSelectedImageURL(event);">
                        <input type="image"   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                    </div>

---

不要为每个img编写onclick=“getImageInfo（this）”，点击图像img->这会给你图像的属性javascript在哪里？不要为每个img编写onclick=“getImageInfo（this）”，点击图像img->这会给你图像的属性javascript在哪里？你需要在画布上绘制图像吗，或者你需要在其他地方使用HTML

img

标记吗？在画布中绘制，但我认为要这样做，我需要在画布中添加img，并在javascript中添加它，这可能是错误的。你必须将代码放在

jQuery（文档）中.ready

：查看更新的答案这是我在控制台中得到的结果：未捕获的语法错误：意外标识符检查此JSFIDLE:。你会出现错误，因为图像不在那里，但它确实显示了SRC。你需要在画布上绘制图像，还是需要在其他地方使用HTML

img

标记？绘制到画布中，但我认为要这样做，我需要在画布中添加img，并在javascript中添加它，但是可能是错误的。您必须将代码放入

jQuery（文档）。准备好了吗？

：请参阅更新的答案这是我在控制台中得到的结果：未捕获的语法错误：意外标识符检查此JSFIDLE:。您会收到错误，因为图像不在那里，但它确实显示SRC。当我单击图像时，似乎什么都没有发生，控制台中没有事件，也没有任何内容…您需要替换“div id=images”块。您可以在单独的文件中测试函数本身，创建文件：“test.js”并添加到文件的文档路径头部。您也可以在DIV branchs下打开：（复制粘贴功能）并重新加载页面以查看其工作情况。当我单击图像时，似乎什么都没有发生，控制台中没有事件，也没有任何内容……您需要替换“DIV id=images”块。您可以在单独的文件中测试函数本身，创建文件：“test.js”并将其添加到文件的文档路径的头部。您也可以在DIV branchs下打开：（复制粘贴函数）并重新加载页面以查看其工作情况。

function getSelectedImageURL(event){
    if(event.target.localName.toUpperCase() == 'IMG')
        alert(event.target.src);
}