Typescript 如何在Deno中获取Base64图像的宽高

发布于11月05日

这是这个问题的重复:Get image width and height from the Base64 code in JavaScript，但我问的是关于德诺的事情.Deno没有我读过的所有解决方案中使用的new Image().我打算在边缘函数中做到这一点，因此减少依赖性是很重要的.以下是我考虑过的一些事情:

https://github.com/DjDeveloperr/skia_canvas个但是我正在工作的边缘环境不允许写访问，这是使用它所必需的.
https://github.com/matmen/ImageScript个但我不知道从哪个相关的Deno http地址导入它

有没有一种方法可以在没有包的情况下做到这一点，或者只需要使用一些内置的包就可以做到呢？

推荐答案

为了在没有外部库的情况下获得图像的宽度和高度，您需要解析图像标题.如果您只处理几种图像类型，您可以很容易地避免使用第三方库.

例如，要从Base64编码的图像中解析PNG图像的宽度和高度，您可以这样做:

import { decode } from "https://deno.land/std/encoding/base64.ts"

const pngImageb64 = /* some png image in base64 */

const pngImage = decode(pngImageb64);
const dataView = new DataView(pngImage.buffer);
// The width and height are 4-byte integers starting 
// at byte offset 16 and 20, respectively.
const width = dataView.getUint32(16);
const height = dataView.getUint32(20);

参考文献:http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html

宽度和高度提供以像素为单位的图像尺寸.它们是4字节的整数.零是无效值.每个的最大值是2^31

对于jpeg，这有点困难，因为维度存储在帧开始(SOF)标记中.以下代码应该适用于大多数情况(仅在几个jpeg中进行了测试)

const jpegImageb64 = /* some jpeg image in base64 */

const jpegImage = decode(jpegImageb64);
const dataView = new DataView(jpegImage.buffer);

let width, height;
for (let i = 0; i < dataView.byteLength - 9; i++) {  // - 9 prevent out-of-bounds access
    if (dataView.getUint16(i) === 0xFFC0 || dataView.getUint16(i) === 0xFFC2) {
      height = dataView.getUint16(i + 5);
      width = dataView.getUint16(i + 7);
      break;
  }
}

其他可能的解决方案:

为了检测图像类型，以便您知道使用哪个解析器，您必须读取图像的第一个字节，您可以使用file-type lib(在解码base64之后)

自己检测jpeg请参见https://github.com/sindresorhus/file-type/blob/5c42f8057f056fe41cbe4bffb53f56987d02e909/core.js#L238-L249.

根据您处理的图像类型的不同，它可能会更加复杂，如果您支持多种图像格式，我建议您使用诸如sharp这样的库来解析数据.