이미지 DOM 요소를 jCanvas의 source 속성 값으로 사용하는 방법은 무엇입니까?

이 예제를 테스트하고 싶습니다. 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의 source 속성 값으로 사용하는 방법은 무엇입니까?

그러나 기본적으로 이미지 "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]은 정의되지 않은 값을 반환합니다. 문서의로드시에 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의 source 속성 값으로 사용하는 방법은 무엇입니까?

답변

관련 문제