TypeScript पर छवियों के साथ कार्य: resize, crop

TypeScript पर छवियों के साथ कार्य: आकार बदलना (resize) और क्रॉप करना (crop)

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

1. Canvas API: बिना निर्भरता के क्लाइंट प्रसंस्करण

ब्राउज़र HTMLCanvasElement छवियों में हेरफेर करने का सबसे आसान तरीका है। इसे अतिरिक्त पैकेज स्थापित करने की आवश्यकता नहीं है और यह किसी भी आधुनिक ब्राउज़र में काम करता है।

1.1. Canvas के माध्यम से आकार बदलना (resize)

मूल विचार मूल छवि को नए आयामों के साथ canvas पर खींचना है, और फिर परिणाम को निर्यात करना है।

function resizeImage(  source: HTMLImageElement,  targetWidth: number,  targetHeight: number): Promise<Blob> {  return new Promise((resolve, reject) => {    const canvas = document.createElement('canvas');    canvas.width = targetWidth;    canvas.height = targetHeight;    const ctx = canvas.getContext('2d');    if (!ctx) {      reject(new Error('Canvas context not supported'));      return;    }    // छवि को नए आयामों के साथ खींचें    ctx.drawImage(source, 0, 0, targetWidth, targetHeight);    // Blob में निर्यात करें (डिफ़ॉल्ट प्रारूप PNG है)    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Failed to create blob'));    }, 'image/jpeg', 0.9); // प्रारूप और गुणवत्ता निर्दिष्ट कर सकते हैं  });}

महत्वपूर्ण: छवि को बड़ा करने (upscale) पर गुणवत्ता खराब हो सकती है - canvas बिलिनियर इंटरपोलेशन का उपयोग करता है। पूर्वावलोकन के लिए यह स्वीकार्य है, प्रिंट के लिए नहीं।

1.2. निर्देशांक के साथ क्रॉप करना (crop)

क्रॉप करने के लिए मूल छवि के आयताकार क्षेत्र को निर्दिष्ट करना आवश्यक है।

function cropImage(  source: HTMLImageElement,  x: number,  y: number,  width: number,  height: number): Promise<Blob> {  return new Promise((resolve, reject) => {    const canvas = document.createElement('canvas');    canvas.width = width;    canvas.height = height;    const ctx = canvas.getContext('2d');    if (!ctx) {      reject(new Error('Canvas not supported'));      return;    }    // मूल छवि से टुकड़ा काटें    ctx.drawImage(source, x, y, width, height, 0, 0, width, height);    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Blob creation failed'));    }, 'image/png');  });}

सुझाव: हमेशा जाँचें कि निर्देशांक x, y, width, height मूल छवि की सीमाओं से बाहर न हों, अन्यथा canvas खाली क्षेत्र लौटाएगा।

2. सर्वर-साइड प्रसंस्करण: sharp और jimp

यदि आप Node.js और TypeScript वातावरण में काम कर रहे हैं, तो लाइब्रेरीज़ sharp (C++ native, उच्च प्रदर्शन) और jimp (शुद्ध JS, क्रॉस-प्लेटफ़ॉर्म) मानक समाधान हैं।

2.1. स्थापना और आयात

// स्थापना// npm install sharp// npm install jimp

import sharp from 'sharp';import Jimp from 'jimp';

2.2. sharp के साथ आकार बदलना (resize)

async function resizeWithSharp(  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> {  await sharp(inputPath)    .resize(width, height, {      fit: 'cover',      // 'cover' - अतिरिक्त काटता है, 'contain' - फिट करता है      position: 'center' // क्रॉप करते समय संदर्भ बिंदु    })    .toFile(outputPath);}

पैरामीटर fit फिट करने की रणनीति निर्धारित करता है: