Node-vibrant: [फ़ीचर] वेबपी सपोर्ट

हम ऐसा कैसे कर सकते है?

खैर, आप वर्तमान में छवियों को पिक्सल के सरणी में कैसे परिवर्तित करते हैं?

ब्राउज़र में, यह <canvas> द्वारा किया जाता है। तो यह सिर्फ एक बात है कि ब्राउज़र किस प्रारूप का समर्थन करता है। [ब्राउज़र.ts] देखें।
नोड.जेएस में, [जिंप] का उपयोग किया जाता है, क्योंकि यह एक शुद्ध जावास्क्रिप्ट कार्यान्वयन है। मैं कुछ बाइनरी/निर्भरताएं पेश नहीं करना चाहता था जो कुछ प्लेटफॉर्म पर डिफ़ॉल्ट कार्यान्वयन में टूट सकते हैं। [नोड.ts] देखें।

नोड-वाइब्रेंट को विस्तार योग्य बनाया गया है। छवि प्रारूप समर्थन ImageClass s के माध्यम से प्रदान किया जाता है। कोई भी अपने स्वयं के ImageClass को लागू कर सकता है और इसे Vibrant.DefaultOpts.ImageClass = YourCustomImageClass सेट करके उपयोग कर सकता है।

एक को लागू करने के लिए, कोई कर सकता है

• अमूर्त वर्ग [ ImageBase ] बढ़ाएँ।
• या खरोंच से [ Image ] इंटरफ़ेस लागू करता है।

आउटपुट पिक्सेल सरणी [ ImageData.data ] के समान प्रारूप होना चाहिए। यह "एक आयामी सरणी है जिसमें आरजीबीए क्रम में डेटा होता है, जिसमें 0 और 255 (शामिल) के बीच पूर्णांक मान होते हैं"।

यह वास्तव में सिर्फ नोड के लिए एक वेबप डिकोडर पैकेज खोजने की बात है।

महान! धन्यवाद! मैं टाइपस्क्रिप्ट में उतना अच्छा नहीं हूं, लेकिन मैं देखूंगा कि क्या किया जा सकता है!

अच्छा!

एफवाईआई। मैं संस्करण 3.1.0 के लिए कई छोटे पैकेजों में नोड-वाइब्रेंट को फिर से सक्रिय कर रहा हूं। सभी छवि वर्गों को अपने स्वयं के npm पैकेज के रूप में लागू किया जाता है।

संदर्भ कार्यान्वयन के लिए @vibrant/image-node । यह अभी भी ऊपर वर्णित जैसा ही है। सिवाय इसके कि अब आपको पूरे रेपो को फोर्क करने के बजाय इस परियोजना से केवल एक @vibrant/image निर्भरता की आवश्यकता होगी। उम्मीद है कि इससे चीजें आसान हो जाएंगी।

महान !

मैं अपने डिस्कॉर्ड बॉट में इस पैकेज का उपयोग कर रहा हूं जो कि इसके कई फायदों के कारण डिफ़ॉल्ट रूप से वेबप प्रारूप में अपनी सभी छवियों को प्रदर्शित करने के लिए आगे बढ़ना शुरू कर रहा है, इसलिए यह सुविधा मेरे लिए बहुत बड़ी चीज बनने लगी है। मुझे एक wontfix लेबल दिखाई देता है जिससे मुझे सचमुच चिंता होती है।

@nitriques क्या आपने अभी तक "क्या किया जा सकता है यह देखने" में से कोई भी किया है? या आप आखिर @akfish पर इस पर काम करने जा रहे हैं?

@ फवना इसे मुख्य पैकेज/रेपो में तय नहीं किया जाएगा। लेकिन यह एक कस्टम ImageClass (और एक अलग npm पैकेज के रूप में प्रकाशित) को लागू करके ठीक करने योग्य है। Node.js (जो मैंने देखा है) के लिए WebP libs के लिए बाहरी बायनेरिज़ या नेटिव मॉड्यूल की आवश्यकता होती है, जो सभी प्लेटफ़ॉर्म पर समर्थन करने के लिए गन्दा हो सकता है। मुख्य पैकेज का उद्देश्य सभी प्लेटफार्मों के लिए आउट-ऑफ-बॉक्स काम करना है।

मैं अपने खाली समय में इस परियोजना पर काम कर रहा हूं और यह सुविधा मेरी प्राथमिकता सूची में अधिक नहीं है। इसलिए मुझे डर है कि यह मेरे द्वारा जल्द ही किसी भी समय ठीक नहीं किया जाएगा।

@Favna

क्या आपने अभी तक अपना कोई "यह देखने के लिए कि क्या किया जा सकता है" किया है?

हां और मैं जो कुछ भी देख रहा हूं वह देशी ऐड-डॉन हैं

अच्छी बात यह है कि मुझे इसकी आवश्यकता है, इसलिए मेरे पास जल्द ही इसके बारे में सोचने का समय हो सकता है।

वैकल्पिक ध्वज के माध्यम से जिंप के बजाय तेज उपयोग करने की अनुमति देने के बारे में आप कैसा महसूस करते हैं? चूंकि v0.20 शार्प को अधिकांश सिस्टम पर npm install अलावा किसी अतिरिक्त इंस्टॉलेशन चरण की आवश्यकता नहीं होती है। यह webp और svg सपोर्ट के साथ भी आता है और एक तेज़ समाधान होने का वादा करता है क्योंकि यह मूल मॉड्यूल पर आधारित है।

मैं सिर्फ एक तेज-आधारित ImageClass बनाने की कोशिश कर रहा हूं, लेकिन यह सीधे आगे नहीं होने वाला है क्योंकि resize / scaleDown को तुल्यकालिक होने की आवश्यकता है, जबकि तेज का आकार बदलने का ऑपरेशन async है।

fyi: यहां तेज का उपयोग करके एक ImageClass कार्यान्वयन है। यह सभी डिफ़ॉल्ट प्रारूपों के अलावा वेबप और एसवीजी दोनों का समर्थन करता है। ऊपर टिप्पणी में वर्णित आकार बदलने के मुद्दे के कारण, कोड 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 {}
}