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

【问题标题】：How do I get the src of images when clicked on Fabric.js canvas?单击 Fabric.js 画布时如何获取图像的 src？
【发布时间】：2013-11-25 02:34:06
【问题描述】：

我正在使用 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>

【问题讨论】：

不要为每个 img 写 onclick="getImageInfo(this)" ，#images img on click -> 这会给你图像的属性
javascript在哪里？

标签： javascript jquery canvas fabricjs

【解决方案1】：

您不必为每个 img 声明 onclick。

试试这个：http://jsfiddle.net/cEh93/

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

【讨论】：

【解决方案2】：

你不需要在每张图片上都加上onclick，你可以为所有图片附加一个jQuery事件处理程序并获取它们的src属性（这将在点击图片时将图片src输出到控制台):

jQuery(document).ready(function()
    jQuery("#images img").on( "click", function() {
        console.log( jQuery( this ).attr('src') );
    });
}); // ready

【讨论】：

您需要在画布上绘制然后图像，还是需要在其他地方使用 HTML img 标签？
绘制到画布中，但我认为这样做我需要在画布中添加 img 并在 javascript 中添加它，但可能是错误的。
您必须将代码放入jQuery(document).ready：查看更新答案
这是我在控制台中得到的：Uncaught SyntaxError: Unexpected identifier
查看这个 JSFIDDLE：jsfiddle.net/ueu9c。您会收到错误，因为图像不存在，但它确实显示了 src

【解决方案3】：

您可以为上层DIV（使用JS）设置SRC仅附加事件的检索，如下所示：

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

【讨论】：

当我点击图片时似乎什么都没有发生，没有任何事件，控制台中什么也没有......
您需要替换“div id=images”块。您可以在单独的文件中测试函数本身，创建文件：'test.js'并添加到文件路径的HEAD文件。您也可以在 DIV 分支下打开：并重新加载页面以查看它是否有效.