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

【问题标题】：JavaScript canvas.toDataURL method returns blank imageJavaScript canvas.toDataURL 方法返回空白图像
【发布时间】：2017-06-21 21:02:06
【问题描述】：

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

我想拍摄一张图片，旋转它并将其放入 HTML 画布中，为此我使用另一个画布来旋转图像，这部分效果很好，但是，当我尝试拍摄图像时从使用 .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>

我在这里被困了一段时间，因此感谢您提供任何帮助。提前致谢！

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

【讨论】：

谢谢！我终于明白发生了什么，移动除了我在处理程序中设置图像路径的行之外的所有内容都解决了问题
不客气 :) 记得将问题标记为已解决！