Javascript HTML5画布toDataURL返回空白
我想上传图像文件,将它们绘制到画布中,进行更改并将其保存在数据库中。我试图测试画布图像(Javascript HTML5画布toDataURL返回空白,javascript,jquery,html,html5-canvas,Javascript,Jquery,Html,Html5 Canvas,我想上传图像文件,将它们绘制到画布中,进行更改并将其保存在数据库中。我试图测试画布图像(Pic)返回的base64值,结果为空。但是,当我将画布(Pic)附加到文档时,我看到了结果。我做错了什么 function handleFileSelect(evt) { var files = evt.target.files; // FileList object for (var i = 0, f; f = files[i]; i++) { if (!
Pic
)返回的base64值,结果为空。但是,当我将画布(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);
}
}
我的直觉告诉我,从
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
为什么$.ajax
调用的对象参数(即//向服务器发送图像
)为空?如果您有意跳过了一些行,请添加注释。Doesconsole.log(Pic)代码>输出什么?是的,它给出了一些我测试过的基本为空的base 64值:@Xufox:这不是问题我认为,从var imageData=…
到img.onload
函数的所有内容都应该进入。图像需要加载才能将其绘制到画布(这是正确的),但画布也需要有图像才能从中获取URL。