Javascript 有没有一种方法可以不使用canvas API从图像文件中获取二进制数据？

我想使用javascript访问和操作图像的二进制数据。据我所知，可以使用CanvasAPI来完成——在内存中创建画布和上下文，然后使用它们的内置方法。我得出的结论如下：

function fileToBase64(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(<string>reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

function base64ToImageData(base64: string): Promise<ImageData> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      resolve(imageData);
    }
    img.onerror = () => reject();
    img.src = base64;
  });
}

函数fileToBase64（file:file）：Promise{
返回新承诺（（解决、拒绝）=>{
const reader=new FileReader（）；
reader.onload=（）=>resolve（reader.result）；
reader.onerror=（）=>拒绝（reader.error）；
reader.readAsDataURL（文件）；
});
}
函数base64ToImageData（base64:string）：承诺{
返回新承诺（（解决、拒绝）=>{
const img=新图像（）；
const canvas=document.createElement（'canvas'）；
const ctx=canvas.getContext（'2d'）；
img.onload=（）=>{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
const imageData=ctx.getImageData（0，0，canvas.width，canvas.height）；
解析（图像数据）；
}
img.onerror=（）=>拒绝（）；
img.src=base64；
});
}

我不喜欢这种方法，因为它太冗长，而且可能比它应该使用的资源要多。
因此，问题是：有没有一种方法可以在不使用canvas API的情况下获得图像的二进制表示形式？

您可以手动构造一个图像，但为此您需要一个Uint8ClampedArray。为此，您还必须自己将二进制文件解码为像素数据。所以你可能想用帆布或OffCreancanvas来做这件事

但是有一些工具可以简化使用 此imageBitmap包含像素数据，但您无法读取它，但至少将其绘制到画布元素会更快

（异步（）=>{
//只是为了模拟从文件输入中获得的文件
const res=等待取数（'https://httpbin.org/image/png')
const blob=wait res.blob（）
常量文件=新文件（[blob]，'image.png'，blob）
异步函数getImageData（blob）{
常量位图=等待createImageBitmap（blob）
const canvas=document.createElement（'canvas'）
const ctx=canvas.getContext（'2d'）
canvas.width=位图.width
canvas.height=位图.height
ctx.drawImage（位图，0，0）
返回ctx.getImageData（0，0，canvas.width，canvas.height）
}
getImageData（blob）.then（imageData=>console.log（imageData.width））
})（）

有没有办法获得二进制表示法？

您是指表示所有rgba像素数据的图像数据，以后可以对其进行操作？有很多图像二进制表示法，png、jpg、webp等