Question

要将PNG转换为原始数据，我将其放在画布上，然后请求图像数据。但是，当我请求数据时，它只包含零。但是，如果我使用.fillRect进行绘制，则会返回绘制的矩形的颜色。好像插入的图像在.getImageData的眼中并不存在。我已经尝试在调用.getImageData时设置超时，但它仍然没有返回正确的数据，因此我认为这不是竞争条件。

这适用于Chrome插件，因此跨平台不是问题。我也尝试过为Canvas启用/禁用硬件加速。

相关代码如下：

  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]);
    }
  });

Answer 1

创建图像时，应使用onLoad事件继续处理它。否则当你把它放到画布上时图像没有准备好。您还应该在onLoad事件回调中包含drawImage。否则会发生什么事情是将空白图片放在画布上。

您应该将代码修改为以下内容：

      var tmpelem = $('<img />');
      tmpelem.on('load', function(){ /* Do all canvas stuff here*/ });
      tmpelem.attr('src', e.target.result);

Answer 2

在Canvas上绘制图像后（不进入该区域）。只是做

var img = imagebuffercont.toDataURL("image/png");

变量img包含原始数据如果有任何疑虑，请发表评论。

Answer 3

我不小心错误地读了数据。

for (var i = 0; i<512*4; i += 4) {应该是for (var i = j*512*4; i<(j+1)*512*4; i += 4) {，否则它会不断迭代前512个像素，这恰好是透明的......

Canvas上的getImageData（）在所有字段中仅返回0

3 个答案: