Node-vibrant: [Feature] поддержка webp

Как мы можем сделать это?

Ну как тебе сейчас преобразовать изображения в массивы пикселей?

В браузере это делает <canvas> . Так что все дело в том, какие форматы поддерживает браузер. См. [Browser.ts].
В node.js используется [jimp], поскольку это чистая реализация JavaScript. Я не хотел вводить некоторые двоичные файлы / зависимости, которые могут нарушить работу на некоторых платформах, в реализацию по умолчанию. См. [Node.ts].

node-vibrant разработан с возможностью расширения. Поддержка формата изображения предоставляется через ImageClass s. Можно реализовать свой собственный ImageClass и использовать его, установив Vibrant.DefaultOpts.ImageClass = YourCustomImageClass .

Чтобы реализовать один, можно было

• Расширить абстрактный класс [ ImageBase ].
• Или реализует интерфейс [ Image ] с нуля.

Выходной массив пикселей должен иметь тот же формат, что и [ ImageData.data ]. Это «одномерный массив, содержащий данные в порядке RGBA с целочисленными значениями от 0 до 255 (включительно)».

На самом деле это просто вопрос поиска пакета декодера webp для узла.

Большой! Благодарность! Я не так хорош в TypeScript, но посмотрю, что можно сделать!

Отлично!

К вашему сведению. Я реорганизую node-vibrant на несколько небольших пакетов для версии 3.1.0. Все классы изображений реализованы как собственные пакеты npm.

Ознакомьтесь с @vibrant/image-node для эталонной реализации. Он по-прежнему такой же, как описано выше. За исключением того, что теперь вам понадобится только одна зависимость @vibrant/image от этого проекта вместо разветвления всего репо. Надеюсь, это упростит ситуацию.

Большой !

Я использую этот пакет в своем боте Discord, который начинает переходить к отображению всех своих изображений в формате webp по умолчанию из-за его многочисленных преимуществ, поэтому эта функция становится для меня огромной вещью. Я вижу ярлык wontfix , и это меня очень беспокоит.

@nitriques , вы уже сделали что-нибудь из своего «видения, что можно сделать»? или ты собираешься работать над этим все- таки @akfish ?

@Favna Это не будет исправлено в основном пакете / репо. Но это можно исправить, реализовав собственный ImageClass (и опубликовав его как отдельный пакет npm). Библиотеки WebP для node.js (которые я видел) требуют внешних двоичных файлов или собственных модулей, которые могут быть беспорядочными для поддержки на разных платформах. Основной пакет предназначен для работы "из коробки" на всех платформах.

Я работаю над этим проектом в свободное время, и эта функция не входит в число моих приоритетных задач. Так что я боюсь, что в ближайшее время это не исправлю.

@Favna

Вы уже сделали что-нибудь из своего «видения того, что можно сделать»?

Да, и все, что я вижу, это нативная реклама

Хорошо то, что он мне нужен, так что у меня, возможно, скоро будет время его порыться.

Как вы относитесь к разрешению использовать резкое вместо jimp с помощью необязательного флага? Начиная с версии 0.20, Sharp не требует дополнительных действий по установке, кроме npm install на большинстве систем. Он также поддерживает webp и svg и обещает стать более быстрым решением, поскольку основан на собственных модулях.

Я просто пытаюсь создать резкую ImageClass но это не будет прямым, поскольку resize / scaleDown должен быть синхронным, тогда как операция изменения размера Sharp является асинхронной.

к сведению: вот реализация ImageClass с использованием Sharp. Он поддерживает как 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 {}
}