单击Fabric.js画布时如何获取图像的src？
[英]How do I get the src of images when clicked on Fabric.js canvas?
问题描述
i'm making a website with Fabricjs. 
我正在用Fabricjs建立一个网站。 One div is going to be the canvas and another is going to have lots of images (hundreds). 一个div将用作画布，另一个将具有很多图像（数百个）。 I want to be able to click on the images so that they pop up in the canvas. 我希望能够单击图像，以便它们在画布中弹出。 My question is; 我的问题是； how do i get the src of the images when clicked on so that an img node goes into the canvas node. 单击时如何获取图像的src，以便img节点进入canvas节点。 Should i make an array of addEventl... for each of the images? 我应该为每个图像制作一个addEventl ...数组吗？
(writing in javascript) （用javascript编写）
thanks as always :) 一如既往的感谢:)
<!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 个解决方案
解决方案1
3 已采纳 2013-11-12 19:18:20
You don't have to declare onclick for each img. 您不必为每个img声明onclick。
Try this: http://jsfiddle.net/cEh93/ 试试这个： http : //jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});
解决方案2
1 2013-11-12 19:06:10
You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked): 您不需要在每个图像上都单击onclick ，可以将jQuery事件处理程序附加到所有图像并获取其src属性（单击该图像时，该图像将src输出到控制台）：
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready
解决方案3
0 2013-11-12 19:26:14
You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that: 您可以为上级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>
To get current selected image SRC on click event... 要在点击事件中获取当前选择的图像SRC ...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.