가상 캔버스 putimagedata가 작동하지 않음

Question

가상 캔버스의 개념에 익숙하지 않습니다. 아래 코드가 작동하지 않는 이유는 무엇입니까? 난 사각형 또는 다른 개체를 그릴하지만 난 이미지를로드하고 때 가상 캔버스에로드 된 이미지를 표시하지 않는 경우

<script type="text/javascript"> 

      $(document).ready(function() { 


       var c1 = document.createElement('canvas'); 
       var ctx1 = c1.getContext("2d"); 
       var c2 = document.getElementById('Canvas2'); 
       var ctx2 = c2.getContext("2d"); 
       c1.width = c2.width; 
       c1.height = c2.height; 

       img1 = new Image(); 
       img1.src = 'A1.png'; 
       img1.onload = function() { 
        ctx1.drawImage(this, 0, 0); 
       }; 


       imgdata = ctx1.getImageData(0, 0, c2.width, c2.height); 

       ctx2.putImageData(imgdata, 0, 0); 


      }); 

     </script> 




    <canvas id="Canvas2" style="display:block;position:absolute;background-color:transparent;border:1px solid red;"> 
    Your browser does not support the HTML5 canvas tag. 
    </canvas> 

개념은 작동합니다. 아래 예제는 잘 작동합니다.

$(document).ready(function() { 


     var c1 = document.createElement('canvas'); 
     var ctx1 = c1.getContext("2d"); 
     var c2 = document.getElementById('Canvas2'); 
     var ctx2 = c2.getContext("2d"); 
     c1.width = c2.width; 
     c1.height = c2.height; 


     ctx1.fillRect(0, 20, 20, 20); 

     imgdata = ctx1.getImageData(0, 0, c2.width, c2.height); 

     ctx2.putImageData(imgdata, 0, 0); 


    }); 

Answer 1

또한 이미지가 로딩 될 때까지 getImageData 등으로 대기, 그래서 이미지가 onLoad 핸들러 내부에로드 된 후 수행해야 할 모든 것을 이동해야합니다 (또는 onload에서 호출 된 함수로 래핑) :

img1.onload = function() { 

    ctx1.drawImage(this, 0, 0); 

    imgdata = ctx1.getImageData(0, 0, c2.width, c2.height); 

    ctx2.putImageData(imgdata, 0, 0); 
}; 

그렇지 않으면 이미지가로드되지 않고 d getImageData를 호출하면 빈 바이트 배열이됩니다.