如何使用圖像DOM元素作爲jCanvas中源屬性的值？

我想測試這個例子：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 如何使用圖像DOM元素作爲jCanvas中源屬性的值？

但我沒有在瀏覽器中看到任何結果，除了圖像默認「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>

謝謝。

來源

2012-06-02 Gobi

[請不要混淆你的URL（http://meta.stackexchange.com/a/64509/130770）（即使他們是* *難看......），堆棧溢出沒有按畢竟，這個角色不會收取任何費用。我們想知道我們要去的地方。 –

設置畫布標記的源時，圖像標記未完全加載。因此，$（'＃draggable'）[0]返回undefined。嘗試在文件加載時調用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>

來源

2012-06-04 18:34:41 sindhu

如何使用圖像DOM元素作爲jCanvas中源屬性的值？

回答

相關問題