user3399326 user3399326 - 5 days ago 4
Javascript Question

HTML5 Canvas toDataURL returns blank

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

Answer

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.

Comments