Node-vibrant: [ميزة] دعم webp

كيف يمكننا فعل ذلك؟

حسنًا ، كيف تقوم حاليًا بتحويل الصور إلى مصفوفات من البكسل؟

في المتصفح ، يتم ذلك بواسطة <canvas> . لذلك فإن الأمر يتعلق فقط بالتنسيقات التي يدعمها المتصفح. راجع [browser.ts].
في node.js ، يتم استخدام [jimp] ، لأنه تطبيق JavaScript خالص. لم أرغب في تقديم بعض الثنائيات / التبعيات التي قد تنكسر في بعض الأنظمة الأساسية في التطبيق الافتراضي. انظر [node.ts].

تم تصميم العقدة النابضة بالحياة لتكون قابلة للتمديد. يتم توفير دعم تنسيق الصورة عبر ImageClass s. يمكن للمرء أن يقوم بتنفيذ ImageClass به واستخدامه عن طريق تعيين Vibrant.DefaultOpts.ImageClass = YourCustomImageClass .

لتنفيذ واحد ، يمكن للمرء

• تمديد فئة الملخص [ ImageBase ].
• أو تنفذ واجهة [ Image ] من البداية.

يجب أن تكون مصفوفة وحدات البكسل بنفس تنسيق [ ImageData.data ]. هذا هو "مصفوفة أحادية البعد تحتوي على البيانات بترتيب RGBA ، مع قيم صحيحة بين 0 و 255 (مضمنة)".

إنها حقًا مجرد مسألة العثور على حزمة فك شفرة webp للعقدة.

رائعة! شكرا! أنا لست جيدًا في TypeScript ، لكنني سأرى ما الذي يمكن عمله!

لطيف - جيد!

لعلمك. أقوم بإعادة هيكلة العقدة الحيوية في حزم صغيرة متعددة للإصدار 3.1.0. يتم تنفيذ جميع فئات الصور كحزم npm الخاصة بها.

راجع @vibrant/image-node للتنفيذ المرجعي. لا يزال كما هو موضح أعلاه. باستثناء ذلك الآن ، ستحتاج فقط إلى تبعية واحدة @vibrant/image من هذا المشروع ، بدلاً من إعادة الشراء بالكامل. نأمل أن يبسط ذلك الأمور.

رائعة !

لقد كنت أستخدم هذه الحزمة في برنامج Discord bot الخاص بي والذي بدأ في الانتقال إلى عرض جميع صوره بتنسيق webp افتراضيًا نظرًا لمزاياها العديدة ، لذا بدأت هذه الميزة في أن تكون شيئًا ضخمًا بالنسبة لي. أرى ملصق wontfix لذلك يقلقني حقًا.

nitriques هل قمت بأي من "رؤية ما يمكن فعله" حتى الآن؟ أم أنك ستعمل على ذلك بعد كل شيء akfish ؟

Favna لن يتم إصلاحه في الحزمة الرئيسية / الريبو. ولكنه قابل للإصلاح من خلال تطبيق ImageClass مخصص (ويتم نشره كحزمة npm منفصلة). تتطلب WebP libs لـ node.js (التي رأيتها) ثنائيات خارجية أو وحدات أصلية ، والتي قد تكون فوضوية لدعمها عبر الأنظمة الأساسية. تهدف الحزمة الرئيسية إلى العمل خارج الصندوق لجميع الأنظمة الأساسية.

أنا أعمل في هذا المشروع في أوقات فراغي وهذه الميزة ليست على رأس قائمة أولوياتي. لذلك أخشى أنه لن يتم إصلاحه بواسطتي في أي وقت قريب.

تضمين التغريدة

هل قمت بأي من "رؤية ما يمكن عمله" حتى الآن؟

نعم وكل ما أراه هو إعلانات أصلية

الشيء الجيد هو أنني بحاجة إليه ، لذلك قد يكون لدي الوقت لأتفقده قريبًا.

كيف تشعر حيال السماح لاستخدام حادة بدلا من jimp عن طريق العلم اختياري؟ نظرًا لأن الإصدار v0.20 Shar لا يتطلب أي خطوات تثبيت إضافية إلى جانب npm install في معظم الأنظمة. يأتي أيضًا مع دعم webp و svg ويعد بأن يكون حلاً أسرع لأنه يعتمد على الوحدات الأصلية.

أحاول فقط إنشاء ImageClass مبنية على أساس حاد ، لكنها لن تكون مباشرة إلى الأمام لأن resize / scaleDown يجب أن تكون متزامنة ، في حين أن عملية تغيير حجم Shar غير متزامنة.

لمعلوماتك: إليك تطبيق ImageClass باستخدام ملف حاد. وهو يدعم كلاً من webp و svg بالإضافة إلى جميع التنسيقات الافتراضية. نظرًا لمشكلة تغيير الحجم الموضحة في التعليق أعلاه ، يقوم الكود بتغيير حجم الصورة بطريقة load ، متجاهلاً بشكل فعال جميع أوامر تغيير الحجم التي تأتي من العقدة الحيوية:

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 {}
}