Question

我需要在javascript中从图像对象中读取图像数据。但我的代码总是返回一个空白数组（设置为255）

<html>
  <header>
  </header>
  <body>
    <input type="file" id="imgfile" onchange="testImageData(event);" />
    <canvas id="canvas1" width="640" height="480"></canvas>
    <script src="./../scripts/cam.js" ></script>
  </body>    
</html>

这是脚本

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
function getImageData(image){
  /*
    returns Uint8ClampedArray object 
    takes an image obj
  */
  var canvas = document.createElement("canvas");
  canvas.height = image.height;
  canvas.width = image.width;
  var ctx = canvas.getContext("2d");
  ctx.width = image.width;
  ctx.height = image.height;
  ctx.drawImage(image,0,0);
  return ctx.getImageData(0, 0, ctx.width, ctx.height);
}

function testImageData(event){
  var selectedFile = event.target.files[0];
  var reader = new FileReader();
  var img = new Image();

  reader.onload = function(event) {
    console.log('onload');
    img.src = event.target.result;
    img.onload = function(){
      context1.drawImage(img, 0,0, img.width, img.height);
      var imgData = getImageData(img);
      // console.log(imgData);
      var data = imgData.data;
      for(var i = 0; i<data.length;i+=4){
        console.log(data[i],data[i+1],data[i+2],data[i+3]);
      }
    }
  };

根据我的理解，console.log应该返回RGBA中的数据。但我只得到255。

console.log output

编辑：

好的，我找到了一个解决方法，但我不明白为什么这样做而是使用getImageData，我直接从绘制的context1获取数据。

function testImageData(event){
  var selectedFile = event.target.files[0];
  var reader = new FileReader();
  var img = new Image();

  reader.onload = function(event) {
    console.log('onload');
    img.src = event.target.result;
    img.onload = function(){
      context1.drawImage(img, 0,0, img.width, img.height);
      var imgData = context1.getImageData(0,0,img.width,img.height);
      var data = imgData.data;
      for(var i = 0; i<data.length;i+=4){
        console.log(data[i],data[i+1],data[i+2],data[i+3]);
      }
    }
  };

所以问题必须在于创建一个新画布。

Answer 1

您应该等待图片加载img.onload您正在等待读者加载事件......

你也忘了阅读文件......错过了reader.readAsDataURL 但你不需要文件阅读器。

window.URL = window.URL || webkitURL
var img = new Image();
img.src = URL.createObjectURL(file)
img.onload = function(){
  // put your image on the canvas
}

getImageData返回白色图像

编辑：

1 个答案: