admin 管理员组

文章数量: 1086019

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: ".jpg",
          yoda: ".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>

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?

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/hphotos-ak-snc6/228564_449431448422343_1996991887_n.jpg",
          yoda: "http://a4.sphotos.ak.fbcdn/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>

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?

  • javascript
  • html
  • html5-canvas
Share Improve this question asked Aug 17, 2012 at 11:38 BadalBadal 3,8174 gold badges38 silver badges60 bronze badges 1
  • Possible duplicate of HTML5 Canvas toDataURL returns blank – Tamás Bolvári Commented Dec 1, 2016 at 11:48
Add a ment  | 

1 Answer 1

Reset to default 3

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.

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

本文标签： javascripthtml5 canvas toDataURL returns blank imageStack Overflow

版权声明：本文标题：javascript - html5 canvas toDataURL returns blank image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744057304a2526082.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。