TypeScript में इमेज प्रोसेसिंग: Sharp और Jimp से resize और crop

TypeScript में इमेज प्रोसेसिंग: resize और crop

आधुनिक वेब डेवलपमेंट में इमेज प्रोसेसिंग सबसे ज़रूरी कामों में से एक है। TypeScript, अपनी स्ट्रिक्ट टाइपिंग और Node.js इंटीग्रेशन के साथ, इमेज को resize और crop करने के लिए भरोसेमंद और तेज़ टूल्स बनाने में मदद करता है। इस आर्टिकल में हम दो लोकप्रिय लाइब्रेरी देखेंगे: Sharp (सर्वर-साइड) और Jimp (शुद्ध JavaScript), साथ ही ब्राउज़र के लिए Canvas API का नेटिव तरीका।

1. TypeScript प्रोजेक्ट सेटअप और इंस्टॉलेशन

सबसे पहले प्रोजेक्ट बनाएँ और ज़रूरी डिपेंडेंसी इंस्टॉल करें:

npm init -y
npm install typescript @types/node sharp jimp
npx tsc --init

tsconfig.json फ़ाइल में सुनिश्चित करें कि "module": "commonjs" और "target": "ES2020" सेट है।

2. Sharp लाइब्रेरी — तेज़ सर्वर-साइड प्रोसेसिंग

Sharp नेटिव libvips मॉड्यूल का उपयोग करता है और बहुत हाई परफॉरमेंस देता है। यह सर्वर एप्लिकेशन (NestJS, Express) के लिए परफेक्ट है।

2.1. Sharp से resize करना

resize() मेथड चौड़ाई और ऊँचाई लेता है। सिर्फ एक पैरामीटर दे सकते हैं — दूसरा अपने आप प्रोपोर्शनल कैलकुलेट होगा।

import sharp from 'sharp';

async function resizeImage(inputPath: string, outputPath: string, width: number, height?: number): Promise<void> {
  try {
    await sharp(inputPath)
      .resize(width, height, {
        fit: 'cover',       // 'cover', 'contain', 'fill', 'inside', 'outside'
        position: 'center'  // cover मोड में क्रॉप पोजीशन
      })
      .toFile(outputPath);
    console.log(`इमेज रीसाइज़ हुई: ${outputPath}`);
  } catch (error) {
    console.error('resize में एरर:', error);
  }
}

// उपयोग उदाहरण
resizeImage('input.jpg', 'output_800x600.jpg', 800, 600);

2.2. Sharp से crop करना

extract() मेथड से आयताकार एरिया काट सकते हैं। पैरामीटर: left, top, width, height।

async function cropImage(
  inputPath: string,
  outputPath: string,
  left: number,
  top: number,
  cropWidth: number,
  cropHeight: number
): Promise<void> {
  try {
    await sharp(inputPath)
      .extract({ left, top, width: cropWidth, height: cropHeight })
      .toFile(outputPath);
    console.log(`क्रॉप पूरा हुआ: ${outputPath}`);
  } catch (error) {
    console.error('crop में एरर:', error);
  }
}

// उदाहरण: 800x600 इमेज से बीच का 400x400 काटें
cropImage('input.jpg', 'cropped_center.jpg', 200, 100, 400, 400);

2.3. resize और crop को एक साथ करना

Sharp में ऑपरेशन को चेन किया जा सकता है। जैसे, पहले छोटा करें, फिर क्रॉप करें:

async function resizeAndCrop(inputPath: string, outputPath: string): Promise<void> {
  await sharp(inputPath)
    .resize(500, 500, { fit: 'inside' })  // बिना क्रॉप के 500x500 करें
    .extract({ left: 50, top: 50, width: 400, height: 400 }) // बीच का हिस्सा काटें
    .toFile(outputPath);
}

resizeAndCrop('input.jpg', 'processed.jpg');

3. Jimp लाइब्रेरी — बिना नेटिव डिपेंडेंसी के शुद्ध JavaScript

Jimp पूरी तरह JavaScript में काम करता है, इसे अलग से कोई सिस्टम लाइब्रेरी इंस्टॉल नहीं करनी पड़ती। AWS Lambda जैसे आइसोलेटेड एनवायरनमेंट के लिए बेहतरीन है।

3.1. Jimp इंस्टॉल करना

npm install jimp
npm install @types/jimp  // TypeScript के लिए

3.2. Jimp से resize करना

import Jimp from 'jimp';

async function resizeWithJimp(inputPath: string, outputPath: string, width: number, height: number): Promise<void> {
  try {
    const image = await Jimp.read(inputPath);
    image.resize(width, height, Jimp.RESIZE_BILINEAR); // एल्गोरिदम: BILINEAR, BICUBIC, NEAREST_NEIGHBOR
    await image.writeAsync(outputPath);
    console.log('Jimp resize पूरा हुआ');
  } catch (error) {
    console.error('Jimp resize में एरर:', error);
  }
}

// उपयोग उदाहरण
resizeWithJimp('input.jpg', 'jimp_resized.jpg', 300, 200);

3.3. Jimp से crop करना

async function cropWithJimp(inputPath: string, outputPath: string, x: number, y: number, w: number, h: number): Promise<void> {
  try {
    const image = await Jimp.read(inputPath);
    image.crop(x, y, w, h);
    await image.writeAsync(outputPath);
    console.log('Jimp crop पूरा हुआ');
  } catch (error) {
    console.error('Jimp crop में एरर:', error);
  }
}

// उदाहरण: ऊपर-बाएँ से 200x200 काटें
cropWithJimp('input.jpg', 'jimp_cropped.jpg', 0, 0, 200, 200);

4. ब्राउज़र में Canvas API से resize और crop

क्लाइंट-साइड प्रोसेसिंग के लिए Canvas API का उपयोग करें। यह बिना किसी लाइब्रेरी के काम करता है।

function canvasResizeAndCrop(
  imageUrl: string,
  targetWidth: number,
  targetHeight: number,
  cropX: number,
  cropY: number,
  cropWidth: number,
  cropHeight: number
): Promise<string> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      const ctx = canvas.getContext('2d')!;
      
      // पहले क्रॉप करें, फिर resize करें
      ctx.drawImage(
        img,
        cropX, cropY, cropWidth, cropHeight,  // सोर्स से क्रॉप
        0, 0, targetWidth, targetHeight       // डेस्टिनेशन पर resize
      );
      
      resolve(canvas.toDataURL('image/jpeg', 0.9));
    };
    img.onerror = reject;
    img.src = imageUrl;
  });
}

// उपयोग उदाहरण
canvasResizeAndCrop('photo.jpg', 400, 300, 50, 50, 600, 450)
  .then(dataUrl => console.log('Canvas प्रोसेसिंग पूरी:', dataUrl));

5. निष्कर्ष

हमने देखा कि TypeScript में इमेज प्रोसेसिंग के लिए Sharp, Jimp और Canvas API तीनों के अपने फायदे हैं। Sharp सबसे तेज़ है और सर्वर के लिए बेस्ट है। Jimp पोर्टेबल है और बिना नेटिव डिपेंडेंसी के काम करता है। Canvas API ब्राउज़र में क्लाइंट-साइड प्रोसेसिंग के लिए परफेक्ट है। अपनी ज़रूरत के हिसाब से कोई भी तरीका चुनें और इमेज को आसानी से resize और crop करें।