Node-vibrant: [功能] webp 支持

我们怎么做？

那么，您目前如何将图像转换为像素数组？

在浏览器中，它是由<canvas> 。 所以这只是浏览器支持什么格式的问题。 参见 [browser.ts]。
在 node.js 中，使用 [jimp]，因为它是纯 JavaScript 实现。 我不想将一些可能在某些平台上破坏的二进制文件/依赖项引入默认实现。 参见 [node.ts]。

node-vibrant 被设计为可扩展的。 图像格式支持通过ImageClass 。 可以实现他/她自己的ImageClass并通过 set Vibrant.DefaultOpts.ImageClass = YourCustomImageClass使用它。

要实现一个，可以

• 扩展抽象类 [ ImageBase ]。
• 或者从头开始实现 [ Image ] 接口。

输出像素数组应与 [ ImageData.data ] 格式相同。 那是“一个一维数组，包含 RGBA 顺序中的数据，整数值介于 0 和 255（包括）之间”。

这实际上只是为 node 找到一个 webp 解码器包的问题。

伟大的！ 谢谢！ 我不擅长打字稿，但我会看看能做些什么！

好的！

供参考。 我正在将 node-vibrant 重构为版本 3.1.0 的多个小包。 所有图像类都实现为它们自己的 npm 包。

查看@vibrant/image-node以获取参考实现。 它仍然与上面描述的相同。 除了现在你只需要这个项目的一个@vibrant/image依赖项，而不是分叉整个 repo。 希望这会简化事情。

伟大的 ！

我一直在我的 Discord bot 中使用这个包，由于它的许多优点，它开始转向默认以 webp 格式显示所有图像，所以这个功能对我来说开始成为一件大事。 我看到一个wontfix标签，所以我真的很担心。

@nitriques你有没有做过任何“看到可以做什么”的事情？ 或者你会在@akfish之后继续工作吗？

@Favna它不会在主包/存储库中修复。 但它可以通过实现自定义 ImageClass（并作为单独的 npm 包发布）来修复。 node.js 的 WebP 库（我见过）需要外部二进制文件或本机模块，这可能很难跨平台支持。 主包旨在为所有平台开箱即用。

我在业余时间从事这个项目，这个功能在我的优先级列表中并不高。 所以我担心它不会很快被我修复。

@法夫娜

你有没有做过任何“看到可以做什么”的事情？

是的，我看到的都是原生插件

好消息是我需要它，所以我可能很快就会有时间四处看看。

您如何看待允许通过可选标志使用sharp而不是jimp？ 由于 v0.20 夏普在大多数系统上除了npm install之外不需要任何额外的安装步骤。 它还带有 webp 和 svg 支持，并有望成为更快的解决方案，因为它基于本机模块。

我只是想创建一个基于夏普的ImageClass但它不会是直接的，因为resize / scaleDown需要同步，而夏普的调整大小操作是异步的。

仅供参考：这是一个使用sharp的ImageClass实现。 除了所有默认格式外，它还支持 webp 和 svg。 由于上面评论中描述的调整大小问题，代码在load方法中调整图像大小，有效地忽略了来自 node-vibrant 的所有调整大小命令：

import * as sharp from "sharp";
import {ImageBase, ImageSource} from "@vibrant/image";

class SharpImage extends ImageBase {
  private _image: ImageData = undefined as any;

  async load(image: ImageSource): Promise<ImageBase> {
    if (typeof image === "string" || image instanceof Buffer) {
      const {data, info} = await sharp(image)
        .resize(200, 200, {fit: "inside", withoutEnlargement: true})
        .ensureAlpha()
        .raw()
        .toBuffer({resolveWithObject: true});
      this._image = {
        width: info.width,
        height: info.height,
        data: (data as unknown) as Uint8ClampedArray,
      };
      return this;
    } else {
      return Promise.reject(
        new Error("Cannot load image from HTMLImageElement in node environment")
      );
    }
  }
  clear(): void {}
  update(): void {}
  getWidth(): number {
    return this._image.width;
  }
  getHeight(): number {
    return this._image.height;
  }
  resize(targetWidth: number, targetHeight: number, ratio: number): void {
    // done in the load step, ignoring any maxDimension or quality options
  }
  getPixelCount(): number {
    const {width, height} = this._image;
    return width * height;
  }
  getImageData(): ImageData {
    return this._image;
  }
  remove(): void {}
}