TypeScript में इमेज प्रोसेसिंग: Jimp, Sharp, Canvas गाइड

TypeScript में इमेज प्रोसेसिंग: Jimp, Sharp और Canvas लाइब्रेरी की समीक्षा

TypeScript सर्वर-साइड और क्लाइंट-साइड डेवलपमेंट के लिए एक शक्तिशाली टूल है। जब इमेज प्रोसेसिंग (साइज़ बदलना, फ़िल्टर लगाना, फ़ॉर्मेट कन्वर्ट करना) की ज़रूरत होती है, तो विशेष लाइब्रेरी काम आती हैं। इस आर्टिकल में हम तीन लोकप्रिय समाधानों पर चर्चा करेंगे: Jimp, Sharp और Canvas। आप जानेंगे कि इन्हें कैसे इंस्टॉल करें और TypeScript में कोड उदाहरण देखेंगे।

1. Jimp — पूरी तरह JavaScript, बिना नेटिव डिपेंडेंसी

Jimp (JavaScript Image Manipulation Program) पूरी तरह JavaScript पर काम करता है, इसलिए इसमें अतिरिक्त सिस्टम लाइब्रेरी इंस्टॉल करने की ज़रूरत नहीं है। यह क्रॉस-प्लेटफ़ॉर्म और सरलता के लिए आदर्श विकल्प है।

इंस्टॉलेशन

npm install jimp
npm install @types/jimp --save-dev

उदाहरण: साइज़ बदलना और सेपिया इफ़ेक्ट

import Jimp from 'jimp';

async function processImage(inputPath: string, outputPath: string): Promise<void> {
    const image = await Jimp.read(inputPath);
    image
        .resize(300, 200)        // चौड़ाई 300, ऊंचाई 200
        .sepia()                 // सेपिया इफ़ेक्ट
        .quality(80)             // JPEG क्वालिटी
        .writeAsync(outputPath);
    console.log('हो गया!');
}

processImage('input.jpg', 'output.jpg').catch(console.error);

Jimp कई ऑपरेशन सपोर्ट करता है: क्रॉप करना, घुमाना, टेक्स्ट जोड़ना, ब्राइटनेस/कंट्रास्ट बदलना, फ़िल्टर (greyscale, sepia, blur)। सभी मेथड Jimp इंस्टेंस लौटाते हैं, जिससे चेनिंग संभव है।

2. Sharp — अधिकतम परफ़ॉर्मेंस

Sharp C में लिखी libvips नेटिव लाइब्रेरी का उपयोग करता है। यह Node.js में इमेज प्रोसेसिंग के सबसे तेज़ टूल्स में से एक है। Sharp हाई-लोड सर्वर और प्रोसेसिंग पाइपलाइन के लिए बेहतरीन है।

इंस्टॉलेशन

npm install sharp
npm install @types/sharp --save-dev

उदाहरण: WebP में कन्वर्ट और रिसाइज़

import sharp from 'sharp';

async function convertToWebP(inputPath: string, outputPath: string): Promise<void> {
    await sharp(inputPath)
        .resize(800, 600, { fit: 'cover' })  // साइज़ के अनुसार क्रॉप
        .webp({ quality: 85 })               // WebP फ़ॉर्मेट
        .toFile(outputPath);
    console.log('कन्वर्ज़न पूरा हुआ');
}

convertToWebP('photo.png', 'photo.webp').catch(console.error);

Sharp मेटाडेटा (EXIF) निकाल सकता है, EXIF ओरिएंटेशन के आधार पर इमेज घुमा सकता है, ब्लर लगा सकता है, कलर स्पेस बदल सकता है और डिस्क पर लिखे बिना बफ़र के साथ काम कर सकता है।

बफ़र के साथ काम करना

import sharp from 'sharp';
import fs from 'fs';

async function processBuffer(inputBuffer: Buffer): Promise<Buffer> {
    return await sharp(inputBuffer)
        .resize(200, 200)
        .jpeg({ quality: 70 })
        .toBuffer();
}

const raw = fs.readFileSync('large.jpg');
processBuffer(raw).then(smallBuffer => {
    fs.writeFileSync('small.jpg', smallBuffer);
    console.log('बफ़र प्रोसेस हो गया');
});

3. Canvas (node-canvas) — ड्रॉइंग और टेक्स्ट

Canvas (node-canvas) लाइब्रेरी HTML5 Canvas के समान API प्रदान करती है। यह ग्राफ़ बनाने, स्क्रैच से इमेज क्रिएट करने या जटिल टेक्स्ट जोड़ने के लिए अपरिहार्य है।

इंस्टॉलेशन

npm install canvas
npm install @types/node --save-dev

ध्यान दें: node-canvas को सिस्टम डिपेंडेंसी (Cairo, Pango, libjpeg) की आवश्यकता होती है। विवरण के लिए आधिकारिक डॉक्यूमेंटेशन देखें।

उदाहरण: टेक्स्ट के साथ इमेज बनाना

import { createCanvas, loadImage, registerFont } from 'canvas';
import fs from 'fs';

async function createBanner(text: string): Promise<void> {
    // फ़ॉन्ट रजिस्टर करें (य