फ़ोटो को Atkinson Dithering में बदलें

 (gazs.github.io)
1 पॉइंट द्वारा GN⁺ 2025-06-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • यह प्रोजेक्ट वेब पर क्लासिक Macintosh 1-bit फ़िल्टर Atkinson Dithering को लागू करता है
  • इनपुट इमेज को 50% ग्रे से तुलना करके श्वेत-श्याम में बदलता है और अंतर को पड़ोसी पिक्सेलों में बाँटता है
  • Canvas, Drag & Drop, WebWorkers, FileReader जैसी आधुनिक ब्राउज़र तकनीकों का उपयोग करता है
  • बदली गई इमेज को राइट-क्लिक करके सेव किया जा सकता है
  • इमेज को ड्रैग करके सेव करना ब्राउज़र की सीमाओं के कारण समर्थित नहीं है

ओपन सोर्स प्रोजेक्ट का महत्व और अलग विशेषताएँ

  • Atkinson Dithering, Hyperdither और HyperScan में इस्तेमाल किया गया क्लासिक Macintosh ग्राफिक्स इफ़ेक्ट है
  • जटिल इमेज रंग जानकारी को पिक्सेल स्तर पर सरल बनाकर, हल्की श्वेत-श्याम इमेज बनाने में उपयोगी है
  • वेब-आधारित इम्प्लीमेंटेशन होने के कारण अलग सॉफ़्टवेयर के बिना केवल आधुनिक ब्राउज़र से उपयोग किया जा सकता है
  • WebWorkers के ज़रिए बड़ी इमेज प्रोसेसिंग के समय असिंक्रोनस निष्पादन और परफ़ॉर्मेंस ऑप्टिमाइज़ेशन संभव है
  • ओपन सोर्स कोड होने से फ़ीचर विस्तार और कस्टमाइज़ेशन आसान है

Atkinson Dithering एल्गोरिद्म का अवलोकन

  • हर पिक्सेल को 50% ग्रे मान से तुलना करके श्वेत-श्याम में बदला जाता है
  • परिवर्तन से पैदा हुए अंतर मान को इस तरह आसपास के 6 पिक्सेलों में बाँटा जाता है
    (X: वर्तमान पिक्सेल, प्रत्येक को 1/8)
    • X 1/8 1/8
    • 1/8 1/8 1/8
    • 1/8
  • इस तरीके से पूरी इमेज पर dithering effect लागू किया जाता है

इम्प्लीमेंटेशन और उपयोग का तरीका

  • इमेज फ़ाइल को ब्राउज़र में drag and drop करके या फ़ाइल चयन सुविधा से इनपुट किया जाता है
  • Canvas API का उपयोग करके रीयल-टाइम में इमेज को बदला और render किया जाता है
  • FileReader से इमेज डेटा पढ़ा जाता है,
  • WebWorkers की मदद से dithering प्रोसेसिंग बैकग्राउंड में चलाई जाती है
  • बदली गई इमेज को राइट-क्लिक करके सेव किया जा सकता है
    (ब्राउज़र की सीमा के कारण इमेज को सीधे डेस्कटॉप पर drag करके सेव नहीं किया जा सकता)

टेक स्टैक और समर्थित वातावरण

  • HTML5 और JavaScript की आधुनिक API का सक्रिय रूप से उपयोग किया जाता है
  • आधुनिक ब्राउज़र वातावरण आवश्यक है, और पुराने ब्राउज़र में कुछ फीचर्स सीमित हो सकते हैं

निष्कर्ष

  • Atkinson Dithering फ़िल्टर का सरल और सहज वेब इम्प्लीमेंटेशन प्रदान करता है
  • ग्राफ़िक्स डेवलपर, आर्टवर्क, इमेज हल्की करना आदि कई क्षेत्रों में इसके उपयोग की संभावना अधिक है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-06-08
Hacker News टिप्पणियाँ

  • यह अब भी मेरा सबसे पसंदीदा black-and-white dither algorithm है
    कॉलेज में मेरा अनुभव था कि Mac से B&W flatbed scanner जोड़कर HyperCard stack जैसे प्रोग्राम में image scan करके black-and-white image बनाई जाती थी
    मैंने कॉलेज बुकस्टोर से खरीदी हुई clipart किताब की images को साधारण तरीके से scan करके उन्हें उस Mac shareware game के 'logo' के रूप में इस्तेमाल किया, जिसे मैंने लगभग 1988 में लिखना शुरू किया था
    तब मुझे नहीं पता था कि Atkinson का algorithm कितना शानदार है, लेकिन बाद में जब मैंने दूसरे dithering algorithms इस्तेमाल किए, तब समझ में आया कि Bill के code का diffusion तरीका वाकई बेहतरीन है
    हाल में eInk calendar project में Moon के अलग-अलग phase images को Atkinson style में बदलना चाहता था, इसलिए संबंधित साइट ढूँढकर चंद्रमा की images convert कीं

  • info dialog में "as follows" लिंक पर क्लिक न करना ही बेहतर है
    काफ़ी समय से update नहीं हुआ, इसलिए अब वह NSFW (काम की जगह या सार्वजनिक स्थान पर देखने के लिए अनुपयुक्त) लिंक में बदल चुका है

  • यह implementation सच में शानदार है
    डाउनलोड करते समय anchor के "download" attribute को value देने पर file को default नाम और .png extension दिया जा सकता है, जिससे download experience थोड़ा बेहतर हो सकता है
    संदर्भ: HTMLAnchorElement.download दस्तावेज़

    • बचाव में कहूँ तो, वह download attribute तुम्हारे दिए हुए लिंक के अनुसार मार्च 2017 से browsers में support होना शुरू हुआ था
      वहीं dithering tool repository की आख़िरी commit मार्च 2016 की लगती है
      लेखक अभी भी GitHub पर दूसरी repositories में सक्रिय हैं, इसलिए उम्मीद है कि शायद pull request स्वीकार कर लें
      लिंक: canvas-atkinson-dither GitHub repository

  • एक project मैं भी बना रहा हूँ, जो कई images को MacPaint में convert करके उन्हें 400k MFS format disk image में बनाने देता है
    लिंक: mfsjs project
    कुछ महीनों तक यह मेरी home directory में थोड़ा उपेक्षित पड़ा रहा, लेकिन हाल में Gemini Deep Research का इस्तेमाल करके library को पूरा किया
    जो लोग इसे दूसरी language में फिर से बनाना या सुधारना चाहें, उनके लिए LLM-generated Markdown भी शामिल किया है

  • अगर आप Python में Atkinson dithering आज़माना चाहते हैं
    तो hyperdither project की सिफारिश करता हूँ

  • implementation भी बढ़िया है और interface में पुरानी यादों वाला एहसास है
    हाल में मेरे Atkinson dithering web component[0] पर आने वाले visitors बढ़ गए, तो मुझे अजीब लगा, लेकिन इसके पीछे ऐसी दुखद ख़बर थी
    व्यक्तिगत रूप से मुझे लगता है कि Atkinson dithering असल में Mac जैसे बहुत crisp monitor पर सबसे सुंदर image बनाता है
    इसमें कुछ cool और 80s वाला vibe है, इसलिए मैंने पिछले साल बनाए अपने game में भी इसका इस्तेमाल किया
    [0]: pixel-accurate Atkinson dithering web component

    • वाह, शानदार web component है

  • कुछ साल पहले मैंने भी ऐसा ही एक tool बनाया था
    Beyond Loom dithering tool

  • size options में से एक 512x384 है, यह दिलचस्प है क्योंकि original Mac resolution 512x342 थी

    • सच में शुरुआती Mac की screen resolution 512x342 थी
      संबंधित जानकारी: original Macintosh resolution
      सुधार: फिर से पढ़ने पर लगा कि दरअसल तुम सही कह रहे थे

    • लगता है यह संयोग नहीं है

  • UI प्यारा है, और demo का GitHub लिंक भी देखने लायक है
    canvas-atkinson-dither GitHub repository

  • क्या यह वही Atkinson हैं जिनका आज निधन हुआ? और क्या यह project उन्हें श्रद्धांजलि देने के लिए है?

    • कुछ हद तक हाँ
      लेकिन repository की पहली commit 15 साल पहले की है, इसलिए यह हाल की खबर सुनकर जल्दी में बनाया गया project नहीं है

    • हाँ, इस algorithm का 'आविष्कार' खुद Atkinson ने किया था
      मैंने 'खोजा' लिखा था, लेकिन 'आविष्कार' कहना ज़्यादा सही है