JS 获取 file 中的图片文件像素

在JavaScript中获取File对象中的图片文件像素，通常需要借助FileReader API和HTMLCanvasElement。首先，你需要让用户选择图片文件，然后读取这个文件，再创建一个canvas元素用于处理图片数据。以下是一个简单的步骤：

1. 创建一个input[type=file]元素，允许用户选择文件：

<input type="file" id="image-file" accept="image/*" onchange="handleImageFileUpload(event)">

2. 添加事件处理器来处理文件选择：

function handleImageFileUpload(e) {
  var file = e.target.files[0];
  if (file) {
    readImage(file);
  }
}

function readImage(file) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var imgData = event.target.result; // 图片数据
    canvasImage(imgData);
  };
  reader.readAsDataURL(file); // 读取图片为data URL
}

3. 创建一个canvas并绘制图像，然后从canvas获取像素数据：

function canvasImage(dataUrl) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = file.size; // 或者从响应头获取宽度
  canvas.height = parseInt(canvas.width * (file.type.match(/(\d+)x(\d+)/)[1] / file.type.match(/(\d+)x(\d+)/)[2]); // 简单地假设宽高比不变
  ctx.drawImage(URL.createObjectURL(file), 0, 0, canvas.width, canvas.height);

  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  // imageData是一个Uint8ClampedArray，包含每个像素的红、绿、蓝和透明度值
}