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