虚拟画布putimagedata不工作 [英] virtual canvas putimagedata not working

问题描述

是新的虚拟画布的概念，任何想法为什么下面的代码不工作？

 < 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 =Canvas2style =display：block; position：absolute; background-color：transparent; border：1px ;> 
您的浏览器并不支持HTML5 canvas标签。 
< / canvas> 
  

这个概念如果我绘制Rectangle或任何其他对象，但当我加载图像它
不显示加载在虚拟画布上的图像。下面的例子工作正常。

  $（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）; 
 
 
}）; 
  

解决方案>

您还必须等待getImageData等，直到图像已加载，所以移动一切需要在之后图像加载到onload处理程序（或将它们包装在一个函数from onload）：

  img1.onload = function（）{
 
 ctx1.drawImage 0，0）; 
 
 imgdata = ctx1.getImageData（0，0，c2.width，c2.height）; 
 
 ctx2.putImageData（imgdata，0，0）; 
}; 
  

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

Am new to concept of virtual canvas, any idea why the below code does not work?

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

The concept works if i draw Rectangle or any other objects but when i am loading images it does not display the images loaded on virtual canvas. As below example works fine.

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


  });

解决方案

You must also wait with getImageData etc. until the image has loaded, so move everything that needs to be done after the image has loaded inside the onload handler (or wrap them in a function called from onload):

img1.onload = function () {

     ctx1.drawImage(this, 0, 0);

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

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

If you don't then the image may not be loaded and drawn to canvas when you call getImageData which results in a blank byte array.

这篇关于虚拟画布putimagedata不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！