canvas, drawImage가 원격 사진에 작동하지 않습니다.

웹에서 그림을 그리기 위해 W3C Shool의 예제 인 html5 코드가 있습니다. 그러나 Chrome에서 html 페이지를로드하면 이미지가 표시됩니다. .canvas, drawImage가 원격 사진에 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
    <body> 
     <canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;"> 
      Your browser does not support the canvas element. 
     </canvas> 

     <script type="text/javascript"> 
      var c=document.getElementById("myCanvas"); 
      var cxt=c.getContext("2d"); 
      var img=new Image(); 
      img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif'; 
      cxt.drawImage(img, 0, 0); 
     </script> 
    </body> 
</html>

이미지가 w3school에서, 나는 내 크롬에서 사진을 볼 수 있습니다 내 크롬 최신 버전입니다, 그래서 문제이고, 나는 심지어 내 로컬 컴퓨터에 사진을 다운로드하려고 모른다 위의 html 페이지와 동일한 디렉토리에 배치하고 코드를 img.src = 'flower.gif'로 변경하십시오. 그러나 여전히 작동하지 않습니다.

출처

2012-11-22 zdd

문제는 이미지를로드하기 전에 그려야한다는 것입니다. 다음과 같이 시도하십시오 :

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;"> 
     Your browser does not support the canvas element. 
    </canvas> 

    <script type="text/javascript"> 

     var c = document.getElementById("myCanvas"); 
     var cxt = c.getContext("2d"); 

     var img=new Image(); 
     img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif'; 

     img.onload = draw; 

     function draw(){    
      cxt.drawImage(img, 0, 0);    
     } 


    </script>

출처

2012-11-22 09:19:56 angio

W3C가 웹 페이지에서 언급하지 않은 이유는 무엇입니까? 그들은 onload 함수없이 예제를 제공한다. http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_image – zdd

canvas, drawImage가 원격 사진에 작동하지 않습니다.

답변

관련 문제