html5 canvas toDataURL 返回空白图像

html5 canvas toDataURL returns blank image

本文关键字：空白 图像 返回 toDataURL canvas html5      更新时间：2023-09-26

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

您首先调用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;
});
相关文章：