HTML5 Canvas toDataURL returns blank

Question

I wanted to upload the image files, draw them into canvas, make changes and save it in the database. I tried to test the base64 value that the canvas image (Pic) returned, and it is blank. However, I see the result when I append the canvas (Pic) to the document. What am I doing wrong here?

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object                
  for (var i = 0, f; f = files[i]; i++) {

    if (!f.type.match('image.*')) {
      continue;
    }
    // read contents of files asynchronously
    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {

        var canvas = document.createElement("canvas");

        var datauri = event.target.result,
          ctx = canvas.getContext("2d"),
          img = new Image();

        img.onload = function() {

          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);
        };
        img.src = datauri;
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

        document.body.appendChild(canvas); //picture gets uploaded                    

        // Generate the image data

        var Pic = canvas.toDataURL("image/png");

        console.log(Pic); // => returns base64 value which when tested equivalent to blank                              
        Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

        // Sending image to Server
        $.ajax({
          // …
        });

      };
    })(f);
    reader.readAsDataURL(f);
  }
}

Why is the object parameter of your $.ajax call (which is // Sending image to Server) empty? Please add a comment if you intentionally skipped some lines. — Tobias
– Tobias, Commented Jul 2, 2015 at 19:52
yes, it gives some base 64 value which I tested is basically blank: — user3399326
– user3399326, Commented Jul 2, 2015 at 19:55
I think, everything from var imageData = … should go into the img.onload function. The image needs to load in order to draw it to the canvas (which is done correctly) but also, the canvas needs to have the image to get a URL from it. — Sebastian Simon
– Sebastian Simon, Commented Jul 2, 2015 at 20:26

Tamás Bolvári · Accepted Answer · 2016-12-01 12:17:14Z

28

My intuition says that everything from var imageData = … should go into the img.onload function.

That means, at the relevant part the code becomes:

img.onload = function() {
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);

  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  document.body.appendChild(canvas); //picture gets uploaded                    

  // Generate the image data

  var Pic = canvas.toDataURL("image/png");

  console.log(Pic); // => returns base64 value which when tested equivalent to blank                              
  Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

  // Sending image to Server
  $.ajax({
    // …
  });
};
img.src = datauri;

The reason is that the line

ctx.drawImage(img, 0, 0, width, height);

correctly executes after the image has been loaded. But unfortunately, you don’t wait for loading when this line gets executed:

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

and all subsequent lines.

The image needs to be loaded in order to draw it on the canvas. The canvas needs to contain the loaded image in order to call getImageData.

edited Dec 1, 2016 at 12:17

Tamás Bolvári

3,0747 gold badges38 silver badges62 bronze badges

answered Jul 2, 2015 at 20:31

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MartinJH Over a year ago

I had so many weird issues by not using the onload function. Using that fixes everything for me. Thanks.

Tulon · Accepted Answer · 2022-12-19 11:07:00Z

-2

I found a better solution to get the base64 code

Instead of this line:

var Pic = canvas.toDataURL("image/png");

use this:

var Pic = canvas.toDataURL("image/png").split(',')[1];

edited Dec 19, 2022 at 11:07

Tulon

4,1346 gold badges41 silver badges66 bronze badges

answered Apr 21, 2022 at 13:29

Kxxx Txxx

7

Collectives™ on Stack Overflow

HTML5 Canvas toDataURL returns blank

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related