HTML5 Canvas toDataURL返回空白

我想上传图像文件，将它们绘制到canvas中，进行更改并将其保存在数据库中。 我试图测试canvas图像（ 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); } } 

Answer 1

我的直觉说var imageData = …所有内容都应该进入img.onload函数。

这意味着，在相关部分，代码变为：

 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; 

原因是这条线

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

加载图像后正确执行。 但遗憾的是，当执行此行时，您不会等待加载：

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

以及所有后续行。

需要加载图像才能在canvas上绘制它。 canvas需要包含加载的图像才能调用getImageData 。