Node-vibrant: [기능] webp 지원

어떻게 할 수 있습니까?

글쎄, 현재 이미지를 픽셀 배열로 변환하는 방법은 무엇입니까?

브라우저에서는 <canvas> 의해 수행됩니다. 따라서 브라우저가 지원하는 형식의 문제일 뿐입니다. [browser.ts]를 참조하세요.
node.js에서는 순수한 JavaScript 구현이기 때문에 [jimp]가 사용됩니다. 일부 플랫폼에서 기본 구현으로 중단될 수 있는 일부 바이너리/종속성을 도입하고 싶지 않았습니다. [node.ts]를 참조하십시오.

node-vibrant는 확장 가능하도록 설계되었습니다. 이미지 형식 지원은 ImageClass 를 통해 제공됩니다. 자신의 ImageClass 하고 Vibrant.DefaultOpts.ImageClass = YourCustomImageClass 세트로 사용할 수 있습니다.

하나를 구현하려면

• 추상 클래스 [ ImageBase ]를 확장합니다.
• 또는 처음부터 [ Image ] 인터페이스를 구현합니다.

출력 픽셀 배열은 [ ImageData.data ]와 같은 형식이어야 합니다. "0에서 255(포함) 사이의 정수 값을 갖는 RGBA 순서로 데이터를 포함하는 1차원 배열"입니다.

노드에 대한 webp 디코더 패키지를 찾는 것은 정말 문제입니다.

엄청난! 감사 해요! TypeScript를 잘하지는 못하지만 무엇을 할 수 있는지 알아보겠습니다!

멋진!

참고로 저는 node-vibrant를 버전 3.1.0용으로 여러 개의 작은 패키지로 리팩토링하고 있습니다. 모든 이미지 클래스는 자체 npm 패키지로 구현됩니다.

참조 구현을 위해 @vibrant/image-node 를 확인하십시오. 여전히 위에서 설명한 것과 동일합니다. 이제 전체 리포지토리를 분기하는 대신 이 프로젝트에서 하나의 @vibrant/image 종속성만 필요하다는 점을 제외하고. 바라건대 그것은 일을 단순화 할 것입니다.

엄청난 !

나는 많은 이점으로 인해 기본적으로 모든 이미지를 webp 형식으로 표시하는 것으로 이동하기 시작한 Discord 봇에서 이 패키지를 사용하고 있으므로 이 기능은 저에게 큰 도움이 되기 시작했습니다. wontfix 레이블이 표시되어 정말 걱정됩니다.

@nitriques "무엇을 할 수 있는지 보기"를 아직 @akfish 결국 작업할 건가요?

@Favna 기본 패키지/

여가 시간에 이 프로젝트를 진행 중이며 이 기능은 우선 순위 목록에 없습니다. 그래서 나는 그것이 곧 고쳐지지 않을 것 같다.

@파브나

"무엇을 할 수 있는지 보는 것"을 아직 해본 적이 있습니까?

예, 내가 보는 모든 것은 기본 애드온입니다.

좋은 점은 내가 필요하기 때문에 곧 둘러볼 시간이 있을 수 있다는 것입니다.

선택적 플래그를 통해 jimp 대신 sharp 를 사용하도록 허용하는 것에 대해 어떻게 생각하십니까? v0.20 샤프는 대부분의 시스템에서 npm install 외에 추가 설치 단계가 필요하지 않습니다. 또한 webp 및 svg 지원과 함께 제공되며 기본 모듈을 기반으로 하기 때문에 더 빠른 솔루션을 약속합니다.

샤프 기반 ImageClass 을 만들려고 하지만 resize / scaleDown 는 동기식이어야 하지만 샤프의 크기 조정 작업은 비동기식이므로 간단하지 않습니다.

fyi: 다음은 샤프를 사용한 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 {}
}