html5 canvas toDataURL 返回空白图片

2022-01-17 00:00:00 javascript html html5-canvas

我正在使用以下代码绘制画布并使用 toDataUrl 将其保存为 png 图像.

i am using following code to draw canvas and save it as png image using toDataUrl.

<!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 浏览器.这里有什么问题?

But my png image is shown as blank image. i see only a blank white image. i searched for this but found nothing on this. i am using php and chrome browser. what is wrong here?

推荐答案

你首先调用 loadImages，然后在 loadImages 调用之后获取数据 URL.但是，正如您的 loadImages 实现所示，调用它只会启动加载过程；当所有图像已加载时调用回调，这是将来的某个时间.

You are first calling loadImages, then getting the data URL right after that loadImages call. However, as your loadImages implementation shows, calling it merely starts the loading process; the callback is called when all images have been loaded, which is some time in the future.

目前你得到一张空白图片，因为图片还没有加载，所以你的回调还没有被调用，结果你的画布仍然是空的.

Currently you're getting a blank image because the images have not been loaded yet, so your callback is not called yet, and as a result your canvas is still empty.

简而言之，依赖于已加载图像的所有内容(例如，您预期的 toDataURL 结果)都应在实际加载这些图像时执行 - 因此在回调中.

In short, everything that relies on the images having being loaded (e.g. your expected toDataURL result) should be executed when those images are actually loaded - thus in the callback.

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;
});

相关文章