在Fabric.js画布上单击时，如何获得图像的src？
在Fabric.js画布上单击时，如何获得图像的src？
提问于 2013-11-12 19:03:18
我在用Fabricjs做一个网站。一个div将是画布，另一个将有许多图像(数百)。我希望能够点击图片，使它们在画布上弹出。我的问题是:如何在单击时获得图像的src，以便img节点进入画布节点。我应该做一个addEventl数组..。对于每一幅图像？
(用javascript书写)
(一如既往地感谢:)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
<a href="http://www.inet.se/" id="HeaderLink1">Om Oss</a>
<a href="F%C3%A4rdigaDesigner.html" id="HeaderLink2">Välj Design</a>
<a href="Framsida.html" id="LogoLink"><img id="Logo" src=LogotypHemsida.png></a>
<a href="SkapaDesign.html" id="HeaderLink3">Skapa Design</a>
<a href="http://sv.reddit.com/" id="HeaderLink4">Hjälp</a>
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<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">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
<a href="">Välj Design</a>
<a href="">Skapa Design</a>
<a href="">Om Oss</a>
<a href="">Hjälp</a>
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
<a href="">Gilla oss på Facebook</a>
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
<a href="">Följ oss på Twitter</a>
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2013-11-12 19:18:20
您不必为每个img声明onclick。
试试这个：http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});Stack Overflow用户
发布于 2013-11-12 19:06:10
您不需要每个图像上的onclick，您可以在所有图像上附加一个jQuery事件处理程序，并获取它们的src属性(这将在单击图像时将图像src输出到控制台)：
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // readyStack Overflow用户
发布于 2013-11-12 19:26:14
您可以为上DIV设置SRC仅附加事件的检索(使用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>若要在单击事件上获取当前选定的图像SRC .
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19937733
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号