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

相关文章