html5 canvas toDataURL 返回空白圖像

Question

我正在使用以下代碼繪制畫布並使用 toDataUrl 將其保存為 png 圖像。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      window.onload = function(images) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        var sources = {
          darthVader: "http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc6/228564_449431448422343_1996991887_n.jpg",
          yoda: "http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/427489_449423165089838_503188418_n.jpg"
        };

        loadImages(sources, function(images) {
          context.drawImage(images.darthVader, 250, 30, 250, 250);
          context.drawImage(images.yoda, 530, 30, 250, 250);
        });


// save canvas image as data url (png format by default)
        var dataURL = canvas.toDataURL();

        // set canvasImg image src to dataURL
        // so it can be saved as an image
        document.getElementById("canvasImg").src = dataURL;
};


    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="850" height="315"></canvas>
<img id="canvasImg" alt="Right click to save me!">
  </body>
</html>

但我的 png 圖像顯示為空白圖像。 我只看到一個空白的白色圖像。 我搜索了這個，但一無所獲。 我正在使用 php 和 chrome 瀏覽器。 這里有什么問題？

Answer 1

您首先調用loadImages ，然后在loadImages調用之后loadImages獲取數據 URL。 但是，正如您的loadImages實現所示，調用它只會啟動加載過程； 當所有圖像都加載完畢后調用回調，這是在未來的某個時間。

目前你得到一個空白圖像，因為圖像尚未加載，所以你的回調還沒有被調用，因此你的畫布仍然是空的。

簡而言之，所有依賴於正在加載的圖像（例如您預期的toDataURL結果）都應該在實際加載這些圖像時執行 - 因此在回調中。

loadImages(sources, function(images) {
  context.drawImage(images.darthVader, 250, 30, 250, 250);
  context.drawImage(images.yoda, 530, 30, 250, 250);

  var dataURL = canvas.toDataURL();
  document.getElementById("canvasImg").src = dataURL;
});

html5 canvas toDataURL 返回空白圖像

問題描述

1 個解決方案

解決方案1
3 已采納 2012-08-17 11:44:30

html5 canvas toDataURL 返回空白圖像

問題描述

1 個解決方案

解決方案1 3 已采納 2012-08-17 11:44:30

解決方案1
3 已采納 2012-08-17 11:44:30