Javascript 画布上的getImageData()在所有字段中仅返回0
要将PNG转换为原始数据,我将其放在画布上,然后请求图像数据。但是,当我请求数据时,它只包含零。但是,如果使用.fillRect绘制,它将返回绘制的矩形的颜色。这就好像插入的图像在.getImageData的眼中并不存在。我尝试在调用.getImageData时设置超时,但它仍然没有返回正确的数据,因此我认为这不是竞争条件 这是一个Chrome插件,所以跨平台不是问题。我还尝试过为画布启用/禁用硬件加速 有关守则如下:Javascript 画布上的getImageData()在所有字段中仅返回0,javascript,html,canvas,Javascript,Html,Canvas,要将PNG转换为原始数据,我将其放在画布上,然后请求图像数据。但是,当我请求数据时,它只包含零。但是,如果使用.fillRect绘制,它将返回绘制的矩形的颜色。这就好像插入的图像在.getImageData的眼中并不存在。我尝试在调用.getImageData时设置超时,但它仍然没有返回正确的数据,因此我认为这不是竞争条件 这是一个Chrome插件,所以跨平台不是问题。我还尝试过为画布启用/禁用硬件加速 有关守则如下: var item = JQuery("<div style=\"w
var item = JQuery("<div style=\"width: 100%; border: 1px solid #b3b2b2; background: #c9c8c8; cursor: pointer; text-align: center;\"><h3 style=\"color: #8b8b8b; font-size: 15px; font-weight: 400;\">Import</h3></div>");
var imagebuffercont = JQuery("<canvas width=512 height=512 style=\"position: fixed; top: 25px; left: 25px; z-index: 9999;\"></canvas>").appendTo("body")[0].getContext("2d");
var uploader = JQuery("<input type= \"file\" style=\"display:none\" />");
uploader.change(function(){
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var tmpelem = $('<img />');
tmpelem.attr('src', e.target.result);
imagebuffercont.drawImage(tmpelem[0], 0, 0);
var imgbuffer = imagebuffercont.getImageData(0,0,512,512).data;
var pixels = [];
for (var j = 0; j<512; j++) {
var tmprow = [];
for (var i = 0; i<512*4; i += 4) {
tmprow.push({
red: imgbuffer[i],
green: imgbuffer[i+1],
blue: imgbuffer[i+2],
alpha: imgbuffer[i+3]
});
}
pixels.push(tmprow);
}
console.log(pixels);
}
reader.readAsDataURL(this.files[0]);
}
});
创建映像时,应使用onLoad事件继续处理它。否则,当您将图像放到画布上时,它还未准备好。您还应该将drawImage包含到onLoad事件回调中。否则,将把空图片放在画布上 您应该将代码修改为以下内容:
var tmpelem = $('<img />');
tmpelem.on('load', function(){ /* Do all canvas stuff here*/ });
tmpelem.attr('src', e.target.result);
在画布上绘制图像后,不要进入该区域。照办
var img = imagebuffercont.toDataURL("image/png");
变量img包含原始数据。
如果有任何问题,请发表评论。我不小心读错了数据
对于var i=0;我可以在调用getImageData之前看到它,但我稍后会尝试。这不就是返回一个base64编码的PNG吗?我已经从上传者那里得到了。我需要访问单个像素的RGBA值。