Node-vibrant: [Fitur] dukungan webp

bagaimana kita bisa melakukan itu?

Nah, bagaimana Anda saat ini mengkonversi gambar ke array piksel?

Di browser, itu dilakukan oleh <canvas> . Jadi hanya masalah format apa yang didukung browser. Lihat [browser.ts].
Di node.js, [jimp] digunakan, karena ini adalah implementasi JavaScript murni. Saya tidak ingin memperkenalkan beberapa binari/dependensi yang mungkin merusak beberapa platform ke dalam implementasi default. Lihat [node.ts].

node-vibrant dirancang agar dapat diperpanjang. Dukungan format gambar disediakan melalui ImageClass s. Seseorang dapat mengimplementasikan ImageClass miliknya sendiri dan menggunakannya dengan set Vibrant.DefaultOpts.ImageClass = YourCustomImageClass .

Untuk mengimplementasikannya, seseorang bisa

• Perluas kelas abstrak [ ImageBase ].
• Atau mengimplementasikan antarmuka [ Image ] dari awal.

Array piksel keluaran harus dalam format yang sama dengan [ ImageData.data ]. Itu adalah "array satu dimensi yang berisi data dalam urutan RGBA, dengan nilai integer antara 0 dan 255 (termasuk)".

Ini benar-benar hanya masalah menemukan paket dekoder webp untuk node.js.

Besar! Terima kasih! Saya tidak begitu baik dalam TypeScript, tapi saya akan melihat apa yang bisa dilakukan!

Bagus!

FYI. Saya memfaktorkan ulang node-vibrant menjadi beberapa paket kecil untuk versi 3.1.0. Semua kelas gambar diimplementasikan sebagai paket npm mereka sendiri.

Lihat @vibrant/image-node untuk implementasi referensi. Itu masih sama seperti yang dijelaskan di atas. Kecuali bahwa sekarang Anda hanya memerlukan satu ketergantungan @vibrant/image dari proyek ini, alih-alih memotong seluruh repo. Semoga itu akan menyederhanakan segalanya.

Besar !

Saya telah menggunakan paket ini di bot Discord saya yang mulai bergerak untuk menampilkan semua gambarnya dalam format webp secara default karena banyak kelebihannya sehingga fitur ini mulai menjadi hal yang besar bagi saya. Saya melihat label wontfix sehingga sangat mengkhawatirkan saya.

@nitriques apakah Anda sudah melakukan "melihat apa yang bisa dilakukan"? atau apakah Anda akan mengerjakannya setelah semua @akfish ?

@Favna Itu tidak akan diperbaiki di paket/repo utama. Tapi itu bisa diperbaiki dengan menerapkan ImageClass kustom (dan diterbitkan sebagai paket npm terpisah). Lib WebP untuk node.js (yang pernah saya lihat) memerlukan binari eksternal atau modul asli, yang mungkin berantakan untuk didukung di seluruh platform. Paket utama dimaksudkan untuk bekerja di luar kotak untuk semua platform.

Saya sedang mengerjakan proyek ini di waktu luang saya dan fitur ini tidak termasuk dalam daftar prioritas saya. Jadi saya khawatir itu tidak akan diperbaiki oleh saya dalam waktu dekat.

@Favna

apakah Anda sudah melakukan "melihat apa yang bisa dilakukan"?

Ya dan yang saya lihat hanyalah add-don asli

Hal baiknya adalah saya membutuhkannya, jadi saya mungkin punya waktu untuk melihat-lihat segera.

Bagaimana perasaan Anda tentang mengizinkan penggunaan sharp alih-alih jimp melalui flag opsional? Karena v0.20 sharp tidak memerlukan langkah instalasi tambahan selain npm install pada kebanyakan sistem. Itu juga dilengkapi dengan dukungan webp dan svg dan menjanjikan untuk menjadi solusi yang lebih cepat karena didasarkan pada modul asli.

Saya hanya mencoba membuat ImageClass berbasis tajam tetapi itu tidak akan langsung karena resize / scaleDown perlu disinkronkan, sedangkan operasi pengubahan ukuran sharp adalah asinkron.

fyi: Ini adalah implementasi ImageClass menggunakan sharp. Ini mendukung webp dan svg selain semua format default. Karena masalah pengubahan ukuran yang dijelaskan dalam komentar di atas, kode mengubah ukuran gambar dalam metode load , secara efektif mengabaikan semua perintah pengubahan ukuran yang berasal dari 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 {}
}