5

我正在使用以下代码绘制画布并使用 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 浏览器。这里有什么问题？

4

1 回答 1

3

您首先调用，然后在调用loadImages后立即获取数据 URL 。但是，正如您的实现所示，调用它只会启动加载过程；当所有图像都已加载时调用回调，这是将来的某个时间。loadImages 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;
});
于 2012-08-17T11:44:30.823 回答