HTML5 Canvas toDataURL返回空白

Question

我想上传图像文件，将其绘制到画布中，进行更改并将其保存在数据库中。我尝试测试画布图像的base64值(照片)返回，为空。然而，我在附加画布时看到了结果(照片)添加到文档中。我在这里做错了什么？

函数handleFileSelect（evt）{var files=evt.target.files；//FileList对象for（var i=0，f；f=文件[i]；i++）{if（！f.type.match（'image.*'））{继续；}//异步读取文件内容var reader=新的FileReader（）；//闭包以捕获文件信息。reader.onload=（函数（theFile）{返回函数（e）{var canvas=document.createElement（“canvas”）；var datauri=事件目标结果，ctx=canvas.getContext（“2d”），img=新图像（）；img.onload=函数（）{canvas.width=宽度；canvas.height=高度；ctx.drawImage（img，0，0，宽度，高度）；};img.src=数据URI；var imageData=ctx.getImageData（0，0，canvas.width，canvax.height）；document.body.appendChild（画布）//图片已上传//生成图像数据var Pic=canvas.toDataURL（“image/png”）；console.log（图片）；//=>返回测试时等于空白的base64值Pic=Pic.replace（/^data:image\/（png|jpg）；base64，/，“”）//将图像发送到服务器$.ajax（美元）({// …});};})（f） ；reader.readAsDataURL（f）；}}

Answer 1

我的直觉告诉我var imageData=…应该进入img.加载功能。

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

img.onload=函数（）{canvas.width=宽度；canvas.height=高度；ctx.drawImage（img，0，0，宽度，高度）；var imageData=ctx.getImageData（0，0，canvas.width，canvax.height）；document.body.appendChild（画布）//图片已上传//生成图像数据var Pic=canvas.toDataURL（“image/png”）；console.log（图片）；//=>返回测试时等于空白的base64值Pic=Pic.replace（/^data:image\/（png|jpg）；base64，/，“”）//将图像发送到服务器$.ajax（美元）({// …});};img.src=数据URI；

原因是这条线

ctx.drawImage（img，0，0，宽度，高度）；

加载图像后正确执行。但不幸的是，当执行此行时，您没有等待加载：

var imageData=ctx.getImageData（0，0，canvas.width，canvax.height）；

以及所有后续行。

需要加载图像才能在画布上绘制。画布需要包含加载的图像才能调用获取图像数据.

Answer 2

我找到了更好的解决方案基数64代码

代替这行：

var Pic=canvas.toDataURL（“image/png”）；

使用此选项：

var Pic=canvas.toDataURL（“image/png”）.split（'，'）[1]；