我的直觉说，所有内容
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);
和所有后续行。
需要加载图像才能在画布上绘制图像。画布需要包含已加载的图像才能调用
getImageData。
