JavaScript canvas.toDataURL方法返回空白图像

Question

我知道这个问题已经被问过好几次了，但是我还没有找到解决方案。

我想拍摄一张图像，然后将其旋转并放入HTML画布中，为此，我正在使用另一张画布来旋转图像，但是这部分效果很好，但是，当我尝试从第二张中获取图像时canvas使用.toDataUrl，它将返回空白图像。 代码如下

  <!DOCTYPE html>
  <html>
  <head>
      <title></title>
  </head>
  <body>
  <canvas id=canvas height="400" width="400" style="border: 10px solid orange"></canvas>
  <canvas id=canvasTransform height="183" width="183" style="border: 10px solid orange"></canvas>
  <script type="text/javascript">
      //this is the canvas in which I want to put the rotated image
      var canvas=document.getElementById("canvas");
      var context=canvas.getContext("2d");

      //and I use this one to rotate it
      var canvasTransform=document.getElementById('canvasTransform');
      var contextTransform=canvasTransform.getContext("2d");

      var image=new Image(46,183);
      image.onload=function(){
        contextTransform.drawImage(image,0,0);
      }
      image.src="Fireball.png";
      console.log(image.src);
      //Now I rotate the context
      contextTransform.rotate(-0.25*Math.PI);
      //After doing this, I can see the rotated image in the second canvas, however, the following line returns a blank image
      var rotatedImageURL=canvasTransform.toDataURL();
      console.log(rotatedImageURL);
      //Finally, this part isn't wornking since I just draw a blank image
      var rotatedImage=new Image();
      rotatedImage.onload=function(){
        context.drawImage(rotatedImage,0,0);
      }
      rotatedImage.src=rotatedImageURL;

  </script>
  </body>
  </html>

我已经在这里停留了一段时间，因此我们将不胜感激。 提前致谢！

Answer 1

您可能需要等到绘制图像后再调用toDataURL。 仅在加载图像后才绘制火球，但在注册onload事件处理程序之后（但实际上未加载之前）会立即调用旋转（及其后的所有操作）。

JavaScript canvas.toDataURL方法返回空白图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-21 13:02:06

JavaScript canvas.toDataURL方法返回空白图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-21 13:02:06

解决方案1
0 已采纳 2017-06-21 13:02:06