TypeScript में छवियों के साथ कार्य: लाइब्रेरी और उपकरण

TypeScript में छवियों के साथ कार्य: लाइब्रेरी और उपकरण

TypeScript एक शक्तिशाली प्रोग्रामिंग भाषा है जो JavaScript को स्थैतिक टाइपिंग के साथ विस्तारित करती है। आधुनिक वेब एप्लिकेशन विकसित करते समय, अक्सर छवियों को संसाधित करने की आवश्यकता होती है: आकार बदलना, प्रारूप बदलना, फ़िल्टर लगाना या पिक्सेल का विश्लेषण करना। इस लेख में, हम TypeScript में छवियों के साथ काम करने के लिए मुख्य लाइब्रेरी और उपकरण, उनकी क्षमताओं और उपयोग के उदाहरणों पर विचार करेंगे।

छवि प्रसंस्करण के लिए लोकप्रिय लाइब्रेरी

कई लोकप्रिय लाइब्रेरी हैं जो TypeScript के साथ अच्छी तरह से एकीकृत होती हैं। आइए प्रत्येक पर विस्तार से विचार करें।

Sharp

Sharp एक उच्च-प्रदर्शन वाली छवि प्रसंस्करण लाइब्रेरी है, जो मूल libvips मॉड्यूल पर आधारित है। यह Node.js पर सर्वर-साइड एप्लिकेशन के लिए आदर्श है। Sharp कई प्रारूपों (JPEG, PNG, WebP, AVIF, TIFF) का समर्थन करता है और न्यूनतम मेमोरी खपत के साथ संचालन करने की अनुमति देता है।

TypeScript के साथ उपयोग का उदाहरण:

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' })      .toFile(outputPath);    console.log('छवि सफलतापूर्वक बदल दी गई');  } catch (error) {    console.error('प्रसंस्करण में त्रुटि:', error);  }}

// उपयोगresizeImage('input.jpg', 'output.jpg', 800, 600);

Sharp की मुख्य क्षमताएँ:

• आकार बदलना और क्रॉप करना
• प्रारूप रूपांतरण
• वॉटरमार्क लगाना
• घुमाना और पलटना
• संपीड़न गुणवत्ता प्रबंधन

Jimp

Jimp (JavaScript Image Manipulation Program) एक विशुद्ध JavaScript लाइब्रेरी है जिसे मूल निर्भरता की आवश्यकता नहीं है। यह Node.js और ब्राउज़र दोनों में काम करती है। Jimp स्थापित करना आसान है, लेकिन बड़ी फ़ाइलों को संसाधित करने में Sharp से धीमी है।

TypeScript में Jimp के साथ काम करने का उदाहरण:

import Jimp from 'jimp';

async function applyFilter(imagePath: string, outputPath: string): Promise<void> {  const image = await Jimp.read(imagePath);    image    .resize(300, Jimp.AUTO) // अनुपात बनाए रखता है    .greyscale()            // ग्रेस्केल में बदलता है    .contrast(0.5)          // कंट्रास्ट बढ़ाता है    .write(outputPath);      console.log('फ़िल्टर लागू किया गया');}

applyFilter('photo.jpg', 'photo-edited.jpg');

Jimp की क्षमताएँ:

• बुनियादी संचालन: resize, crop, rotate
• रंग प्रभाव: sepia, greyscale, brightness
• पारदर्शिता और टेक्स्ट ओवरले के साथ कार्य
• 20 से अधिक छवि प्रारूपों का समर्थन

ब्राउज़र एप्लिकेशन के लिए Canvas API

यदि आप TypeScript में क्लाइंट-साइड एप्लिकेशन विकसित कर रहे हैं, तो आप अंतर्निहित Canvas API का उपयोग कर सकते हैं। यह कोई लाइब्रेरी नहीं है, बल्कि ड्राइंग और छवि प्रसंस्करण के लिए एक मानक वेब इंटरफ़ेस है। TypeScript Canvas के सभी तरीकों के लिए प्रकार प्रदान करता है।

Canvas पर छवि लोड और प्रसंस्करण का उदाहरण:

function processImageOnCanvas(imageUrl: string): void {  const canvas = document.createElement('canvas');  const ctx = canvas.getContext('2d');    if (!ctx) {    throw new Error('Canvas समर्थित नहीं है');  }    const img = new Image();  img.onload = () => {    canvas.width = img.width / 2;    canvas.height = img.height / 2;        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);        // ब्लर प्रभाव लागू करें    ctx.filter = 'blur(4px)';    ctx.drawImage(canvas, 0, 0);        // पिक्सेल डेटा प्राप्त करें    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);    console.log('पहला पिक्सेल:', imageData.data.slice(0, 4));  };