Skia Canvas: Node के लिए HTML Canvas drawing API का browserless implementation

 (skia-canvas.org)
4 पॉइंट द्वारा GN⁺ 2024-12-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें

परिचय

  • Skia Canvas एक लाइब्रेरी है जो Node.js में HTML Canvas drawing API को ब्राउज़र के बिना implement करती है.
  • यह Google के Skia graphics engine पर आधारित है और Chrome के <canvas> element जैसे मिलते-जुलते परिणाम बनाती है.
  • यह desktop और server पर hardware-accelerated graphics render करने या विभिन्न image formats output करने के लिए उपयुक्त है.

मुख्य विशेषताएँ

  • Rendering GPU पर होती है, इसलिए यह तेज़ और compact है, और काम को Rust तथा C++ में लिखे native code से संभालती है.
  • यह OS native graphics pipeline का उपयोग करके window में render कर सकती है और browser जैसे UI event framework प्रदान करती है.
  • यह raster (JPEG, PNG, WEBP) और vector (PDF, SVG) formats में images बना सकती है.
  • Images को file के रूप में save किया जा सकता है, buffer के रूप में लौटाया जा सकता है, या dataURL string में encode किया जा सकता है.
  • Asynchronous rendering और file I/O के लिए यह user-configurable worker pool में native threads का उपयोग करती है.
  • दिए गए canvas पर कई 'pages' बनाए जा सकते हैं और उन्हें एक single multi-page PDF या कई files में saved image sequence के रूप में output किया जा सकता है.
  • Efficient boolean operations या point-to-point interpolation का उपयोग करके Bezier paths को simplify, smooth, combine, excerpt और atomize किया जा सकता है.
  • Scaling, rotation और transforms के अलावा यह 3D perspective transforms भी प्रदान करती है.
  • Bitmap-based patterns के अलावा vector-based textures से shapes को fill किया जा सकता है और custom markers के साथ lines draw की जा सकती हैं.
  • यह CSS filter image processing operators को पूरी तरह support करती है.
  • यह multi-line, word-wrapped text, line-by-line text metrics, small caps, ligatures और अन्य OpenType features सहित समृद्ध typography control प्रदान करती है.
  • Non-system fonts को local files से load करके इस्तेमाल किया जा सकता है.

उदाहरण उपयोग

Image file बनाना

  • Canvas का उपयोग करके 400x400 आकार का canvas बनाया जाता है और 2D context लिया जाता है.
  • createConicGradient का उपयोग करके color gradient जोड़ने और rectangle draw करने का उदाहरण दिया गया है.
  • Asynchronous function render के माध्यम से image को save करने, buffer में बदलने, या string के रूप में embed करने का तरीका बताया गया है.

Multi-page sequence

  • अलग-अलग रंगों वाले pages बनाकर उन्हें multi-page PDF file के रूप में save करने या individual image files के रूप में save करने का तरीका समझाया गया है.

Window में rendering

  • Window का उपयोग करके 300x300 आकार की window बनाकर draw event के माध्यम से circle draw करने का तरीका बताया गया है.

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-12-04
Hacker News राय

  • https://windowjs.org एक ऐसा प्रोजेक्ट है जो Skia को रैप करता है, उसे Canvas API के रूप में एक्सपोज़ करता है, और v8 को एम्बेड करके एक छोटा runtime प्रदान करता है

    • यह प्रोजेक्ट पहली बार 3 साल पहले open source के रूप में जारी किया गया था
    • WebGL, ऑडियो आदि को एक्सपोज़ करके इसे desktop पर JavaScript-आधारित गेम्स के लिए एक प्लेटफ़ॉर्म बनाने की योजना थी
    • दूसरे प्रोजेक्ट्स और जीवन में बदलावों के कारण इसका development रुक गया, लेकिन यह देखकर खुशी है कि यह प्रोजेक्ट Canvas को browser के बाहर भी इस्तेमाल करने योग्य बनाता है

  • अगर Node के साथ compatible Canvas implementation में रुचि है, तो निम्नलिखित देखे जा सकते हैं

    • canvaskit-wasm Skia प्रोजेक्ट द्वारा प्रदान किया जाता है, और लगता है कि यह GPU acceleration को support नहीं करता
    • @napi-rs/canvas सबसे तेज़ binding प्रदान करता है
    • node-canvas Skia की जगह Cairo का उपयोग करता है

  • ऐसी लाइब्रेरीज़ के उपयोग के उद्देश्य को लेकर जिज्ञासा है

    • एक राय है कि desktop पर इससे बेहतर native लाइब्रेरीज़ मौजूद होंगी

  • Skia, Node को support करने वाला WASM build CanvasKit प्रदान करता है, और यह मॉड्यूल एक Rust binding है

    • हर approach के फायदे और नुकसान में रुचि है

  • यह सवाल है कि क्या यह Rust crate के wrapper जैसा है

  • Node/Web के लिए ऐसा ही कुछ बनाया गया था, और भले ही यह परफेक्ट नहीं है, लेकिन अच्छा है

    • SDL का उपयोग करके OS में window बनाई जा सकती है
    • documentation और examples देखे जा सकते हैं

  • पहले के प्रयासों में Node-Gyp installation की आवश्यकता होती थी, इसलिए वे कठिन थे

    • इस प्रोजेक्ट का लंबे समय से इंतज़ार था

  • यह सिर्फ़ एक साधारण rendering API से बढ़कर है

    • यह OS native graphics pipeline का उपयोग करके window में render कर सकता है और browser जैसी UI event framework प्रदान करता है
    • WebGPU support के लिए wgpu जोड़ा जा सकता है और WebGL support के लिए ANGLE जोड़ा जा सकता है

  • https://malmal.io में इसका उपयोग server पर draw किए गए tiles को render करने के लिए किया जाता है, और यह बहुत अच्छी तरह काम करता है

  • यह जानने की जिज्ञासा है कि क्या यह MapLibre को server-side render करने में मदद करेगा

    • map thumbnails उपलब्ध कराने के लिए