如何使用图像 DOM 元素作为 jCanvas 中源属性的值？答案

【问题标题】：How to use an image DOM element as a value for the source property in jCanvas?如何使用图像 DOM 元素作为 jCanvas 中源属性的值？
【发布时间】：2012-06-07 15:43:02
【问题描述】：

我想测试这个例子：http://calebevans.me/projects/jcanvas/sandbox.php#%24%28%22canvas%22%29.drawImage%28%7B%0A%20%20source%3A%20%24%28%27%23image-fish%27%29%5B0%5D%2C%0A%20%20x%3A%2050%2C%20y%3A%2050%2C%0A%20%20width%3A%20100%2C%0A%20%20fromCenter%3A%20false%0A%7D%29%3B

但我在浏览器中看不到任何结果，除了默认的图像“img src”。请有人帮助我。如何使用此功能？

  <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Demo</title> 
        <canvas width="500" height="250"></canvas> 
      </head>
        <script src="jquery.js"></script>
        <script src="jcanvas.js"></script>
        <script>

        $("canvas").drawImage({
        source: $('#draggable')[0],
        x: 50, y: 50,
        width: 60,
        fromCenter: false
        });

        </script>            
         <body>
            <img src="../image/0.jpg" class="drag-image" id="draggable"/>
        </div>
      </body>
    </html>

谢谢。

【问题讨论】：

Please don't obfuscate your URLs（即使他们是那丑...），毕竟堆栈溢出不会按角色收费。我们想知道我们要去哪里。

标签： javascript jquery jcanvas

【解决方案1】：

在设置画布标签的来源时，图像标签未完全加载。结果， $('#draggable')[0] 返回未定义。尝试在加载文档时调用 drawImage。以下应该可以解决您的问题。

 <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Demo</title> 
        <canvas width="500" height="250"></canvas> 
      </head>
        <script src="jquery.js"></script>
        <script src="jcanvas.js"></script>
        <script>

        $(document).ready(function(){
            $("canvas").drawImage({
                 source: $('#draggable')[0],
                 x: 50, y: 50,
                 width: 60,
                 fromCenter: false
              });
         });

        </script>            
         <body>
            <img src="../image/0.jpg" class="drag-image" id="draggable"/>
        </div>
      </body>
    </html>

【讨论】：