0

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

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


  });

4

1 回答 1

1

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

img1.onload = function () {

     ctx1.drawImage(this, 0, 0);

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

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

如果你不这样做，那么当你调用 getImageData 时，图像可能不会被加载并绘制到画布上，这会导致一个空白字节数组。

于 2014-05-21T11:08:01.577 回答