Node-vibrant: 【機能】webpサポート

どうすればそれができますか？

さて、あなたは現在、画像をピクセルの配列にどのように変換しますか？

ブラウザでは、 <canvas>によって実行されます。 したがって、ブラウザがサポートする形式の問題です。 [browser.ts]を参照してください。
node.jsでは、純粋なJavaScript実装であるため、[jimp]が使用されます。 一部のプラットフォームで機能しなくなる可能性のあるバイナリ/依存関係をデフォルトの実装に導入したくありませんでした。 [node.ts]を参照してください。

node-vibrantは、拡張可能になるように設計されています。 画像形式のサポートは、 ImageClass介して提供されます。 自分のImageClassを実装し、セットVibrant.DefaultOpts.ImageClass = YourCustomImageClassます。

1つを実装するには、

• 抽象クラス[ ImageBase ]を拡張します。
• または、[ Image ]インターフェースを最初から実装します。

出力ピクセル配列は[ ImageData.data ]と同じ形式である必要があります。 これは、「RGBAオーダーのデータを含み、0から255までの整数値（含まれる）を持つ1次元配列」です。

実際には、ノード用のwebpデコーダーパッケージを見つけるだけです。

素晴らしい！ ありがとう！ 私はTypeScriptが苦手ですが、何ができるか見ていきます。

良い！

ご参考までに。 node-vibrantをバージョン3.1.0の複数の小さなパッケージにリファクタリングしています。 すべての画像クラスは、独自のnpmパッケージとして実装されています。

リファレンス実装については、 @vibrant/image-nodeを確認してください。 それでも上記と同じです。 ただし、リポジトリ全体をフォークするのではなく、このプロジェクトから@vibrant/imageつの

素晴らしい ！

私はDiscordボットでこのパッケージを使用してきましたが、その多くの利点により、デフォルトですべての画像をwebp形式で表示するようになり始めているため、この機能は私にとって大きなものになり始めています。 wontfixラベルが表示されているので、本当に心配です。

@nitriquesは、「何ができるかを見る」ことをまだ行ったことがありますか？ それとも@akfishの後でそれに

@Favnaメインパッケージ/リポジトリでは修正されません。 ただし、カスタムImageClassを実装することで修正できます（別のnpmパッケージとして公開されます）。 node.jsのWebPライブラリ（私が見たもの）には、外部バイナリまたはネイティブモジュールが必要です。これらは、プラットフォーム間でサポートするのが面倒な場合があります。 メインパッケージは、すべてのプラットフォームですぐに使用できるようになっています。

私は暇なときにこのプロジェクトに取り組んでいますが、この機能は私の優先リストの上位にはありません。 ですから、私はそれがすぐに修正されることはないのではないかと心配しています。

@Favna

「何ができるかを見る」ことはもうしましたか？

はい、私が見るのはネイティブの広告です-ドン

良いことは、私がそれを必要としていることです、それで私はすぐにそれをいじくり回す時間があるかもしれません。

オプションのフラグを使用して、ジンプの代わりにシャープを使用できるようにすることについてどう思いますか？ v0.20 Sharpは、ほとんどのシステムでnpm install以外に追加のインストール手順を必要としないためです。 また、webpとsvgのサポートが付属しており、ネイティブモジュールに基づいているため、より高速なソリューションになることが約束されています。

シャープベースのImageClassを作成しようとしていますが、 resize / scaleDownは同期する必要があるのに対し、シャープのサイズ変更操作は非同期であるため、簡単ではありません。

fyi：これは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 {}
}