html转换成canvas文字空白,HTML5 Canvas toDataURL返回空白

我想上传图像文件，将它们绘制到画布中，进行更改并将其保存在数据库中。我尝试测试画布图像(Pic)返回的base64值，该值为空白。但是，当我将canvas(Pic)附加到文档时，会看到结果。我在这里做错了什么？

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

}

}