Javascript 虚拟画布图像数据不工作

我对虚拟画布的概念很陌生，你知道为什么下面的代码不起作用吗

    <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>

---

您还必须等待getImageData等，直到图像加载完毕，因此将图像加载后需要执行的所有操作都移动到onload处理程序中（或将其包装在从onload调用的函数中）：

---

如果不这样做，则在调用getImageData时，图像可能不会加载并绘制到画布，这将导致一个空白字节数组。

。将不得不等待接受此：-）谢谢

  $(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);


  });

img1.onload = function () {

     ctx1.drawImage(this, 0, 0);

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

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