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

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

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

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

छवियों के साथ कार्य करने के लिए लोकप्रिय लाइब्रेरीज़

• Sharp — Node.js के लिए एक उच्च-प्रदर्शन लाइब्रेरी, जो C++ में लिखी गई है। सर्वर-साइड प्रसंस्करण के लिए आदर्श: रीसाइज़, संपीड़न, फ़ॉर्मेट रूपांतरण।
• Jimp — एक शुद्ध JavaScript लाइब्रेरी, जिसे मूल निर्भरताओं की आवश्यकता नहीं है। सरल संचालन और क्रॉस-प्लेटफ़ॉर्म समाधानों के लिए उपयुक्त।
• Canvas — Node.js के लिए HTML5 Canvas का कार्यान्वयन। यह चित्र बनाने, टेक्स्ट जोड़ने और जटिल कंपोज़िशन बनाने की अनुमति देता है।
• Pica — ब्राउज़र और Node.js में गुणवत्तापूर्ण छवि रीसाइज़ के लिए लाइब्रेरी।

TypeScript में Sharp की स्थापना और कॉन्फ़िगरेशन

Sharp छवि प्रसंस्करण के लिए सबसे तेज़ लाइब्रेरीज़ में से एक है। इंस्टॉलेशन npm के माध्यम से किया जाता है:

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

इंस्टॉलेशन के बाद, लाइब्रेरी को TypeScript फ़ाइल में आयात किया जा सकता है:

import sharp from 'sharp';

const resizeImage = async (  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> => {  try {    await sharp(inputPath)      .resize(width, height)      .toFile(outputPath);    console.log('छवि सफलतापूर्वक बदल दी गई');  } catch (error) {    console.error('रीसाइज़ करने में त्रुटि:', error);  }};

Jimp के साथ कार्य: सरल हेरफेर

Jimp को मूल निर्भरताओं की आवश्यकता नहीं है और यह सरल संचालन के लिए उपयुक्त है। इंस्टॉलेशन:

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

Jimp का उपयोग करके चमक और कंट्रास्ट बदलने का उदाहरण:

import Jimp from 'jimp';

const adjustImage = async (inputPath: string, outputPath: string): Promise<void> => {  const image = await Jimp.read(inputPath);    image    .brightness(0.2)    // चमक 20% बढ़ाएँ    .contrast(0.1)      // कंट्रास्ट 10% बढ़ाएँ    .write(outputPath);    console.log('छवि संसाधित हो गई');};

Canvas: शुरू से छवियाँ बनाना

Canvas लाइब्रेरी प्रोग्रामेटिक रूप से छवियाँ बनाने, आकृतियाँ बनाने और टेक्स्ट जोड़ने की अनुमति देती है। इंस्टॉलेशन:

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

टेक्स्ट के साथ एक सरल छवि बनाने का उदाहरण:

import { createCanvas, loadImage } from 'canvas';import * as fs from 'fs';

const createTextImage = async (  text: string,  outputPath: string): Promise<void> => {  const width = 800;  const height = 200;  const canvas = createCanvas(width, height);  const ctx = canvas.getContext('2d');

  // पृष्ठभूमि भरना  ctx.fillStyle = '#4a90d9';  ctx.fillRect(0, 0, width, height);

  // टेक्स्ट सेटिंग  ctx.font = 'bold 48px Arial';  ctx.fillStyle = '#ffffff';  ctx.textAlign = 'center';  ctx.textBaseline = 'middle';

  // टेक्स्ट बनाना  ctx.fillText(text, width / 2, height / 2);

  // फ़ाइल में सहेजना  const buffer = canvas.toBuffer('image/png');  fs.writeFileSync(outputPath, buffer);  console.log('छवि बन गई');};

गुणवत्ता बनाए रखते हुए छवियों का संपीड़न

छवि अनुकूलन वेब प्रोजेक्ट्स के लिए एक महत्वपूर्ण कार्य है। Sharp संपीड़न मापदंडों को बारीकी से समायोजित करने की अनुमति देता है: