SVGcode: रास्टर इमेज को SVG वेक्टर ग्राफ़िक में बदलने के लिए एक PWA

SVGcode एक प्रोग्रेसिव वेब ऐप्लिकेशन है, जिसकी मदद से JPG, PNG, GIF, WebP, AVIF वगैरह जैसी रास्टर इमेज को SVG फ़ॉर्मैट में वेक्टर ग्राफ़िक में बदला जा सकता है. इसमें File System Access API, एसिंक्रोनस क्लिपबोर्ड एपीआई, फ़ाइल हैंडलिंग एपीआई, और विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल किया जाता है.

Thomas Steiner

रास्टर से वेक्टर तक

क्या आपने कभी किसी इमेज को स्केल किया है और नतीजा पिक्सलेट और असंतुष्ट था? अगर आपने इसलिए, आपने शायद WebP, PNG या JPG जैसे रास्टर इमेज फ़ॉर्मैट का इस्तेमाल किया हो.

इसके उलट, वेक्टर ग्राफ़िक ऐसी इमेज होती हैं जिन्हें किसी निर्देशांक सिस्टम में पॉइंट के हिसाब से तय किया जाता है. ये बिंदुओं को रेखाओं और कर्व से जोड़कर पॉलीगॉन और अन्य आकृतियां बनाई जाती हैं. वेक्टर ग्राफ़िक में रास्टर ग्राफ़िक्स पर इस तरह का लाभ उठा सकता है कि उन्हें किसी भी रिज़ॉल्यूशन तक बढ़ाया या घटाया जा सकता है वह भी बिना पिक्सलेशन के.

पेश है SVGcode

मैंने SVGcode नाम का एक PWA बनाया है, जो रास्टर इमेज को वेक्टर. क्रेडिट जहां क्रेडिट बकाया है: मैंने इसका आविष्कार नहीं किया था. SVGcode के साथ, मैं इसके तहत, Potrace नाम के कमांड-लाइन टूल के कंधों पर पीटर सेलिंगर, जो मेरे पास हैं वेब असेंबली में बदला गया, ताकि इसका इस्तेमाल वेब ऐप्लिकेशन.

SVGcode का इस्तेमाल करना

सबसे पहले, मैं आपको इस ऐप्लिकेशन को इस्तेमाल करने का तरीका दिखाना चाहता हूं. मैंने Chrome Dev समिट के टीज़र इमेज के साथ शुरुआत की है जिसे मैंने ChromiumDev के Twitter चैनल से डाउनलोड किया है. यह एक PNG रास्टर इमेज है, जिसे SVGcode ऐप्लिकेशन पर खींचें और छोड़ें. फ़ाइल को छोड़ने पर, ऐप्लिकेशन इमेज को रंग के हिसाब से ट्रेस करता है, जब तक कि इनपुट का वेक्टर वाला वर्शन न दिखे. अब मैं इमेज को ज़ूम इन करके देख सकती हूँ. के किनारे नुकीले रहते हैं. हालांकि, Chrome के लोगो को ज़ूम इन करके देखा जा सकता है कि बेहतरीन, और खास तौर पर लोगो की आउटलाइन थोड़ी-बहुत तिरछी लगती है. मैं ऐसा करके नतीजे को बेहतर बना सकती हूं उदाहरण के लिए, पांच पिक्सल तक के स्पेकल को दबाकर, ट्रेस करने की प्रोसेस बंद करना.

SVGcode में पोस्टर बनाना

वेक्टराइज़ेशन के लिए एक ज़रूरी चरण, इनपुट को पोस्ट करना (पोस्ट करना) करना है, खास तौर पर फ़ोटोग्राफ़ी वाली इमेज के लिए इमेज का इस्तेमाल करें. SVGcode की मदद से मैं हर कलर चैनल के हिसाब से ऐसा कर सकता/सकती हूं और जिससे मैं बदलाव करता/करती हूं. नतीजे से संतुष्ट होने पर, मेरे पास SVG फ़ाइल को अपनी हार्ड डिस्क में सेव करने का विकल्प होगा और जहां चाहें, वहां इसका इस्तेमाल करें.

SVGcode में इस्तेमाल किए गए एपीआई

अब जब आपने यह देख लिया है कि यह ऐप्लिकेशन क्या कर सकता है, तो अब मैं आपको कुछ ऐसे एपीआई दिखाता हूं जिनकी मदद से जादू हुआ.

प्रोग्रेसिव वेब ऐप्लिकेशन

SVGcode एक ऐसा प्रोग्रेसिव वेब ऐप्लिकेशन है जिसे इंस्टॉल किया जा सकता है. इसलिए, यह पूरी तरह ऑफ़लाइन चालू रहता है. यह ऐप्लिकेशन, पूरी तरह कैसे वेनिला JS टेंप्लेट Vite.js के लिए और लोकप्रिय Vite प्लगिन PWA, जो एक ऐसा सर्विस वर्कर बनाता है जो हुड के तहत Workbox.js का इस्तेमाल करता है. वर्कबॉक्स एक सेट है की मदद से, जो प्रोग्रेसिव वेब ऐप्लिकेशन के लिए प्रोडक्शन के लिए तैयार सर्विस वर्कर को चलाने में मदद करती है. ज़रूरी नहीं है कि यह सभी ऐप्लिकेशन के लिए काम करे. हालांकि, SVGcode के इस्तेमाल के हिसाब से यह बहुत अच्छा है.

विंडो कंट्रोल ओवरले

उपलब्ध स्क्रीन रीयल एस्टेट को बढ़ाने के लिए, SVGcode इन विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाने के लिए, इसके मुख्य मेन्यू को ऊपर की ओर ले जाएं कर सकता है. इंस्टॉल फ़्लो के आखिर में, आपको यह सुविधा चालू होती दिखेगी.

फ़ाइल सिस्टम को ऐक्सेस करने का एपीआई

इनपुट इमेज फ़ाइलें खोलने और उनसे बनने वाले SVG फ़ाइल को सेव करने के लिए, मैं File System Access API. इससे मुझे पुराना कॉन्टेंट सेव करने की अनुमति मिलती है और ऐप्लिकेशन के फिर से लोड होने के बाद भी, वहीं से शुरू करने के लिए जहां मैंने छोड़ा था. जब भी कोई इमेज मिलती है सेव की गई है, इसे svgo लाइब्रेरी के ज़रिए ऑप्टिमाइज़ किया गया है, जिसमें कुछ समय लग सकता है, SVG फ़ाइल की जटिलता पर निर्भर करता है. 'फ़ाइल सेव करें' डायलॉग दिखाने के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है. हां इसलिए, SVG ऑप्टिमाइज़ेशन से पहले फ़ाइल हैंडल हासिल करना ज़रूरी है, ताकि उपयोगकर्ता ऑप्टिमाइज़ किए गए SVG के तैयार होने तक जेस्चर अमान्य नहीं होगा.

try {
  let svg = svgOutput.innerHTML;
  let handle = null;
  // To not consume the user gesture obtain the handle before preparing the
  // blob, which may take longer.
  if (supported) {
    handle = await showSaveFilePicker({
      types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
    });
  }
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  showToast(i18n.t('savedSVG'));
  const blob = new Blob([svg], {type: 'image/svg+xml'});
  await fileSave(blob, {description: 'SVG file'}, handle);
} catch (err) {
  console.error(err.name, err.message);
  showToast(err.message);
}

खींचें और छोड़ें

इनपुट इमेज खोलने के लिए, मैं फ़ाइल खोलने की सुविधा का इस्तेमाल कर सकता/सकती हूं या जैसा कि आपने ऊपर दिखाया है, बस ऐप्लिकेशन पर किसी इमेज फ़ाइल को खींचें और छोड़ें. फ़ाइल खोलने की सुविधा बहुत आसान है. 'खींचें और छोड़ें' केस दिलचस्प है. इसकी सबसे अच्छी बात यह है कि डेटा ट्रांसफ़र आइटम से फ़ाइल सिस्टम हैंडल पाने के लिए, getAsFileSystemHandle() तरीका. जैसा कि हमने पहले बताया था, मैं इस हैंडल को लागू रख सकता हूं. इसलिए, ऐप्लिकेशन के फिर से लोड होने पर यह हैंडल के लिए तैयार रहता है.

document.addEventListener('drop', async (event) => {
  event.preventDefault();
  dropContainer.classList.remove('dropenter');
  const item = event.dataTransfer.items[0];
  if (item.kind === 'file') {
    inputImage.addEventListener(
      'load',
      () => {
        URL.revokeObjectURL(blobURL);
      },
      {once: true},
    );
    const handle = await item.getAsFileSystemHandle();
    if (handle.kind !== 'file') {
      return;
    }
    const file = await handle.getFile();
    const blobURL = URL.createObjectURL(file);
    inputImage.src = blobURL;
    await set(FILE_HANDLE, handle);
  }
});

ज़्यादा जानकारी के लिए, File System Access API पर यह लेख देखें और अगर आपकी दिलचस्पी है, तो SVGcode सोर्स कोड को src/js/filesystem.js.

Async Clipboard API

SVGcode, Async Clipboard API के ज़रिए ऑपरेटिंग सिस्टम के क्लिपबोर्ड के साथ पूरी तरह से इंटिग्रेट भी होता है. आप ऑपरेटिंग सिस्टम के फ़ाइल एक्सप्लोरर से ऐप्लिकेशन में इमेज चिपका सकते हैं. इसके लिए, इमेज चिपकाने के लिए बटन दबाएं या अपने कीबोर्ड पर command या control साथ v दबाकर रखें.

Async Clipboard API को हाल ही में, SVG इमेज के साथ काम करने की सुविधा भी मिल गई है. इसकी मदद से, साथ ही, आगे की प्रोसेस के लिए SVG इमेज को कॉपी करें और उसे किसी दूसरे ऐप्लिकेशन में चिपकाएं.

copyButton.addEventListener('click', async () => {
  let svg = svgOutput.innerHTML;
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  const textBlob = new Blob([svg], {type: 'text/plain'});
  const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
  navigator.clipboard.write([
    new ClipboardItem({
      [svgBlob.type]: svgBlob,
      [textBlob.type]: textBlob,
    }),
  ]);
  showToast(i18n.t('copiedSVG'));
});

ज़्यादा जानने के लिए, एसिंक्रोनस क्लिपबोर्ड लेख पढ़ें या फ़ाइल देखें src/js/clipboard.js.

फ़ाइल मैनेज करना

SVGcode की मेरी पसंदीदा सुविधाओं में से एक यह है कि यह ऑपरेटिंग सिस्टम के साथ कितनी अच्छी तरह से मिल जाता है. इस तौर पर इंस्टॉल किया गया PWA, इमेज फ़ाइलों के लिए फ़ाइल हैंडलर या यहां तक कि डिफ़ॉल्ट फ़ाइल हैंडलर बन सकता है. यह इसका मतलब है कि अपने macOS मशीन पर Finder का इस्तेमाल करते समय, इमेज पर राइट क्लिक करके उसे खोला जा सकता है SVGcode. इस सुविधा को फ़ाइल मैनेज करना कहते हैं और यह फ़ाइल_हैंडलर की प्रॉपर्टी के आधार पर काम करती है वेब ऐप्लिकेशन मेनिफ़ेस्ट और लॉन्च की सूची. इनकी मदद से ऐप्लिकेशन, पास की गई फ़ाइल का इस्तेमाल कर सकता है.

window.launchQueue.setConsumer(async (launchParams) => {
  if (!launchParams.files.length) {
    return;
  }
  for (const handle of launchParams.files) {
    const file = await handle.getFile();
    if (file.type.startsWith('image/')) {
      const blobURL = URL.createObjectURL(file);
      inputImage.addEventListener(
        'load',
        () => {
          URL.revokeObjectURL(blobURL);
        },
        {once: true},
      );
      inputImage.src = blobURL;
      await set(FILE_HANDLE, handle);
      return;
    }
  }
});

ज़्यादा जानकारी के लिए, इंस्टॉल किए गए वेब ऐप्लिकेशन को फ़ाइल हैंडलर बनने दें देखें और सोर्स कोड को src/js/filehandling.js.

वेब शेयर (फ़ाइलें)

ऑपरेटिंग सिस्टम के साथ मिलाने का एक और उदाहरण ऐप्लिकेशन की शेयर सुविधा है. मान लीजिए कि मुझे SVGcode की मदद से बनाए गए SVG फ़ाइल में बदलाव करना है, तो इसका एक तरीका फ़ाइल को सेव करना है, SVG एडिटिंग ऐप्लिकेशन लॉन्च करें और वहां से SVG फ़ाइल खोलें. हालांकि, स्ट्रीम का एक बेहतर फ़्लो यह है कि वेब शेयर एपीआई का इस्तेमाल करें, जिससे फ़ाइलों को सीधे तौर पर शेयर किया जा सकता है. इसलिए, अगर SVG एडिटिंग ऐप्लिकेशन, शेयर टारगेट के तौर पर सेट है. यह बिना किसी बदलाव के सीधे फ़ाइल पा सकता है.

shareSVGButton.addEventListener('click', async () => {
  let svg = svgOutput.innerHTML;
  svg = await optimizeSVG(svg);
  const suggestedFileName =
    getSuggestedFileName(await get(FILE_HANDLE)) || 'Untitled.svg';
  const file = new File([svg], suggestedFileName, { type: 'image/svg+xml' });
  const data = {
    files: [file],
  };
  if (navigator.canShare(data)) {
    try {
      await navigator.share(data);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error(err.name, err.message);
      }
    }
  }
});

वेब शेयर टारगेट (फ़ाइलें)

इसके उलट, SVGcode भी शेयर टारगेट के तौर पर काम कर सकता है और अन्य ऐप्लिकेशन से फ़ाइलें पा सकता है. यहां की यात्रा पर हूं इसे काम करता है, तो ऐप्लिकेशन को वेब शेयर टारगेट एपीआई यह किस तरह का डेटा स्वीकार कर सकता है. ऐसा इसके ज़रिए होता है: खास तौर पर बनाए गए फ़ील्ड में.

{
  "share_target": {
    "action": "https://svgco.de/share-target/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "image",
          "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
        }
      ]
    }
  }
}

action रूट असल में मौजूद नहीं है, लेकिन इसे पूरी तरह सर्विस वर्कर के fetch में हैंडल किया जाता है हैंडलर, जो फिर ऐप्लिकेशन में असल प्रोसेसिंग के लिए मिली फ़ाइलों को पास करता है.

self.addEventListener('fetch', (fetchEvent) => {
  if (
    fetchEvent.request.url.endsWith('/share-target/') &&
    fetchEvent.request.method === 'POST'
  ) {
    return fetchEvent.respondWith(
      (async () => {
        const formData = await fetchEvent.request.formData();
        const image = formData.get('image');
        const keys = await caches.keys();
        const mediaCache = await caches.open(
          keys.filter((key) => key.startsWith('media'))[0],
        );
        await mediaCache.put('shared-image', new Response(image));
        return Response.redirect('./?share-target', 303);
      })(),
    );
  }
});

नतीजा

ठीक है, यह SVGcode में मौजूद कुछ बेहतर ऐप्लिकेशन सुविधाओं के बारे में फटाफट जानकारी थी. उम्मीद है कि यह ऐप्लिकेशन यह आपकी इमेज प्रोसेसिंग की ज़रूरतों को पूरा करने के लिए, एक ज़रूरी टूल बन सकता है. साथ ही, Squoosh या SVGOMG.

SVGcode svgco.de पर उपलब्ध है. देखो वहां मैंने क्या किया? आप GitHub पर इसके सोर्स कोड की समीक्षा करें. ध्यान दें कि चूंकि Potrace SVGcode के साथ-साथ GPL का लाइसेंस भी है. इसके साथ ही, कार्ड बनाने के लिए शुभकामनाएं! मुझे उम्मीद है कि SVGcode उपयोगी होगा, और इसकी कुछ सुविधाएं आपके अगले ऐप्लिकेशन को प्रेरित कर सकती हैं.

स्वीकार की गई

इस लेख की समीक्षा जो मेडली ने की है.