फोटो फ़िल्टर्स

फ़िल्टर लागू करें, चमक, कंट्रास्ट, संतृप्ति और बहुत कुछ समायोजित करें।

100% क्लाइंट-साइड · आपकी फ़ाइलें आपके डिवाइस से कभी नहीं जातीं

यहाँ एक छवि खींचें और छोड़ें

या ब्राउज़ करने के लिए क्लिक करें · JPEG, PNG, WebP, GIF, BMP, AVIF और अधिक

«छवि फ़िल्टर» असल में आपके पिक्सेलों के साथ क्या करता है

एक छवि फ़िल्टर हर पिक्सेल पर लागू एक गणितीय संक्रिया है। इस उपकरण का हर फ़िल्टर एक विशिष्ट रूपांतरण से मेल खाता है। चमक 150% हर रंग चैनल को 1.5 से गुणा करता है (अधिकतम पर बँधा), पूरी छवि को हल्का बनाता है। कंट्रास्ट 150% मध्य-बिंदु के चारों ओर मानों को खींचता है, गहरे पिक्सेलों को और गहरा और हल्के पिक्सेलों को और हल्का करता है। संतृप्ति रंगों को धूसर की ओर या उससे दूर खींचती है समग्र चमक को संरक्षित करते हुए। हुए-घुमाव हर रंग को रंग-चक्र के चारों ओर एक चुने हुए कोण से घुमाता है। सेपिया एक निश्चित 3x3 मैट्रिक्स लागू करता है जो RGB को गर्म भूरे-रंग के पैलेट पर मैप करता है (R' = 0.393R + 0.769G + 0.189B, और G' और B' के लिए समान सूत्र)। ग्रेस्केल हर पिक्सेल को ITU-R BT.601 गुणांकों (0.299, 0.587, 0.114) से ल्यूमिनेंस-भारित औसत में बदलता है, वही भार जो मानवीय दृष्टि चमक को महसूस करने के लिए उपयोग करती है। ब्लर एक गाऊसी कन्वोल्यूशन है: हर आउटपुट पिक्सेल आसपास के पिक्सेलों का भारित औसत बन जाता है। इनवर्ट हर चैनल को पलट देता है: c' = 1 घटा c।

इस उपकरण का हर प्रीसेट इन संक्रियाओं का नामित संयोजन है। «Vivid» बढ़ा हुआ कंट्रास्ट और संतृप्ति ढेर करता है; «B&W» ग्रेस्केल को 100% पर सेट करता है; «Sepia» सेपिया को 100% पर सेट करता है और संतृप्ति घटाता है; «Warm» एक सेपिया रंगत और हल्की संतृप्ति जोड़ता है; «Cool» हुए को नीले की ओर घुमाता है; «Vintage» कंट्रास्ट और संतृप्ति घटाता है और थोड़ा गर्म करता है; «Dramatic» कंट्रास्ट और संतृप्ति को ज़ोर से धकेलता है; «Fade» कंट्रास्ट को नरम करता है और हल्का सा उजला करता है। पर्दे के पीछे, हर प्रीसेट बस एक अलग CSS फ़िल्टर स्ट्रिंग लिखता है। आप किसी भी प्रीसेट से शुरू कर सकते हैं और सटीक दृश्य प्राप्त करने के लिए व्यक्तिगत स्लाइडर ट्वीक कर सकते हैं।

यहाँ सभी फ़िल्टर ब्राउज़र के मानकीकृत CSS फ़िल्टर फ़ंक्शनों (W3C Filter Effects Module Level 1) से लागू होते हैं, 2016-2019 के बाद से हर आधुनिक ब्राउज़र पर GPU के माध्यम से कार्यान्वित। पूर्वावलोकन रीयल-टाइम में अपडेट होता है जब आप स्लाइडर हिलाते हैं क्योंकि संक्रियाएँ ग्राफ़िक्स कार्ड पर गणना होती हैं, CPU पर नहीं। डाउनलोड चरण फ़िल्टर परिणाम को मूल छवि आयामों पर एक नए PNG, JPEG या WebP में पका देता है, इसलिए निर्यात की गई फ़ाइल पहले से लागू दृश्य रखती है; कोई अलग रेंडर चरण ज़रूरी नहीं।

यह उपकरण भीतर से कैसे काम करता है

फ़िल्टर इंजन ब्राउज़र की Canvas API है, CSS फ़िल्टर फ़ंक्शनों के साथ संयुक्त। जब आप कोई छवि गिराते हैं, ब्राउज़र का अंतर्निहित डिकोडर फ़ाइल (JPEG, PNG, WebP, GIF, BMP, AVIF, या SVG) को मेमोरी में एक HTMLImageElement पर कच्चे पिक्सेलों में बदलता है। पिक्सेलों को <canvas> तत्व पर खींचा जाता है। फ़िल्टर लागू करने के लिए, उपकरण ctx.filter = «brightness(150%) contrast(110%) saturate(120%) sepia(20%) ...» सेट करता है और स्रोत छवि को फिर से खींचता है; ब्राउज़र फ़िल्टर श्रृंखला को GPU पर लागू करता है और कैनवस परिणाम दिखाता है।

प्रीसेट स्क्रिप्ट में संग्रहीत पूर्व-परिभाषित फ़िल्टर स्ट्रिंग्स हैं। «B&W» है grayscale(100%) contrast(105%)। «Vintage» हो सकता है sepia(35%) saturate(75%) contrast(95%) brightness(102%)। प्रीसेट चुनना इन स्ट्रिंग्स में से एक को कैनवस फ़िल्टर में लिखता है; व्यक्तिगत स्लाइडर तब मेल खाने के लिए अपडेट होते हैं, इसलिए आप वहाँ से बारीक-ट्यून कर सकते हैं। «Hold to Compare» अस्थायी रूप से ctx.filter = «none» सेट करता है और मूल छवि को फिर से खींचता है, फिर आपके छोड़ने पर चुना हुआ फ़िल्टर बहाल करता है।

डाउनलोड चरण स्रोत छवि को उसके मूल आयामों (स्क्रीन पूर्वावलोकन आकार नहीं) पर एक नए कैनवस पर वर्तमान फ़िल्टर के साथ फिर से खींचता है, फिर canvas.toBlob() परिणाम को नए PNG, JPEG, या WebP के रूप में निर्यात करता है। आउटपुट में फ़िल्टर प्रभाव पिक्सेल डेटा में पके हुए हैं, इसलिए प्राप्तकर्ता उपकरण की स्थिति की आवश्यकता के बिना वही दृश्य देखता है। इस सब के दौरान टैब से कुछ बाहर नहीं जाता; फ़िल्टरिंग के लिए कोई लाइब्रेरी लोड नहीं होती।

फ़ोटो फ़िल्टरों का संक्षिप्त इतिहास

छवि फ़िल्टर कैसे काम करते हैं

छवि फ़िल्टर एक फ़ोटो के पिक्सेल मान को बदलकर उसकी उपस्थिति बदलते हैं। चमक समग्र उज्ज्वलता समायोजित करती है, कंट्रास्ट प्रकाश और गहरे क्षेत्रों के बीच अंतर बढ़ाता है।

यह टूल आपके ब्राउज़र के नेटिव Canvas CSS फ़िल्टर इंजन का उपयोग करता है, वास्तविक समय प्रदर्शन के लिए GPU-त्वरित। सब कुछ आपके डिवाइस पर रहता है।

सामान्य उपयोग

वास्तविक-दुनिया के फ़िल्टर प्रवाह

सामान्य फँसाव और उनका अर्थ

गोपनीयता: छवियाँ कभी आपका उपकरण नहीं छोड़तीं

हर क्लाउड-आधारित फ़ोटो फ़िल्टर सेवा (Pixlr, Fotor, BeFunky, ऑनलाइन «Instagram फ़िल्टर» साइटें) आपकी फ़ोटो को संचालक के सर्वर पर अपलोड करती है, उनके हार्डवेयर पर फ़िल्टर लागू करती है, और फ़िल्टर की गई छवि डाउनलोड के रूप में लौटाती है। फ़ोटो नियमित रूप से संवेदनशील मेटाडेटा को फ़िल्टरिंग के बाद भी रखती हैं: फ़ोटो खींचने के स्थान के GPS निर्देशांक, कैमरा और उपकरण जानकारी, कैप्चर तारीख और समय, और स्वयं फ़ोटो सामग्री, जिसमें अक्सर चेहरे, स्थान, आंतरिक UI के स्क्रीनशॉट, या अन्य पहचानने योग्य सामग्री शामिल होती है। अधिकांश संचालक गोपनीयता नीतियाँ प्रकाशित करते हैं जिसमें वे एक-दो घंटे में अपलोड हटाने और परिवहन में एन्क्रिप्ट करने का वचन देते हैं, और बड़े संचालक ISO/IEC 27001 प्रमाणन रखते हैं। उनके पास इन नीतियों के पालन के मज़बूत वाणिज्यिक कारण हैं। पर «एक घंटे में हटा दिया गया» का मतलब «कभी नहीं देखा गया» नहीं है। उस घंटे के दौरान छवि-सामग्री संचालक के बुनियादी ढाँचे में रहती है, सही अनुमतियों वाले किसी भी प्रक्रिया या व्यक्ति को सुलभ, और संचालक की अवधारण नीति के अनुसार लॉग और बैकअप में दिखती है।

यह फ़िल्टर उपकरण कभी कुछ अपलोड नहीं करता। पूरी पाइपलाइन (फ़ाइल चयन, ब्राउज़र के अंतर्निहित डिकोडरों के माध्यम से डिकोडिंग, GPU के माध्यम से Canvas फ़िल्टर, ब्राउज़र के एनकोडरों के माध्यम से वैकल्पिक डाउनलोड) JavaScript और मानकीकृत CSS Filter Effects API का उपयोग करते हुए आपके ब्राउज़र टैब के अंदर चलती है। कोई अपलोड नहीं, छवि-डेटा ले जाने वाला कोई नेटवर्क अनुरोध नहीं, कोई लॉग प्रविष्टि नहीं। फ़िल्टर करने से पहले ब्राउज़र के डेवलपर टूल्स में Network टैब खोलकर पुष्टि कर सकते हैं: कोई अनुरोध छवि-सामग्री के साथ नहीं चलता। एकमात्र नेटवर्क ट्रैफ़िक स्वयं पृष्ठ का आरंभिक लोड है; फ़िल्टरिंग संक्रिया के लिए कोई लाइब्रेरी डाउनलोड नहीं होती। पृष्ठ लोड के बाद ब्राउज़र को हवाई-जहाज़ मोड में रखें और फ़िल्टर उपकरण स्थानीय छवियों पर काम करता रहता है।

जब कोई और उपकरण सही चयन हो

अक्सर पूछे जाने वाले प्रश्न

क्या फ़िल्टर छवि गुणवत्ता कम करते हैं?

फ़िल्टर पूर्ण रिज़ॉल्यूशन पर लागू होते हैं, इसलिए कोई गुणवत्ता हानि नहीं। डाउनलोड करते समय, छवि मूल आयामों पर निर्यात होती है।

क्या मैं कई फ़िल्टर संयोजित कर सकता हूँ?

हाँ। आठों समायोजन स्लाइडर एक साथ काम करते हैं। आप किसी प्रीसेट से शुरू करके कुछ स्लाइडर को परिष्कृत कर सकते हैं।

"तुलना के लिए दबाए रखें" क्या करता है?

जब तक आप "तुलना के लिए दबाए रखें" बटन दबाए रखते हैं, पूर्वावलोकन अस्थायी रूप से मूल छवि बिना फ़िल्टर के दिखाता है।

क्या मेरी छवियाँ कहीं भेजी जाती हैं?

नहीं। सभी फ़िल्टर प्रसंस्करण आपके ब्राउज़र की अंतर्निहित Canvas API का उपयोग करता है। आपकी छवियाँ पूरी तरह आपके डिवाइस पर रहती हैं।

और अधिक सामान्य प्रश्न

चरम सेटिंग्स पर मेरी छवि पोस्टराइज़्ड क्यों दिखती है?

क्योंकि गणित गुंजाइश से बाहर हो जाती है। हर रंग चैनल के पास केवल 256 संभव मान हैं (8-बिट RGB में 0 से 255)। चमक या कंट्रास्ट को मूल सीमा से बहुत आगे धकेलना सुंदर ग्रेडिएंट संरक्षित करने के बजाय 0 या 255 पर काट देता है। परिणाम बैंडिंग (सहज संक्रमण होने चाहिए वहाँ दिखाई देने वाले चरण) और पोस्टराइज़ेशन (एकल रंग में ढहने वाले क्षेत्र) हैं। समाधान: सबसे चरम स्लाइडर को वापस खींचें, या यदि आपके पास उच्च-बिट-गहराई वाला स्रोत है तो उससे शुरू करें (RAW या 16-बिट TIFF, बिट गहराई संरक्षित करने वाले डेस्कटॉप उपकरण में संपादित)।

क्या मैं एक कस्टम प्रीसेट सहेज सकता हूँ?

इस उपकरण के UI में सीधे नहीं। पर स्वयं स्लाइडर मान आपके «प्रीसेट» हैं: आठ संख्याएँ नोट करें (चमक, कंट्रास्ट, संतृप्ति, सेपिया, ग्रेस्केल, हुए-रोटेट, ब्लर, इनवर्ट) और आप किसी भी भविष्य की फ़ोटो पर सेकंडों में लुक फिर से बना सकते हैं। बहु-फ़ोटो प्रवाह के लिए जहाँ आप एक बैच में समान लुक चाहते हैं, यह मैनुअल दृष्टिकोण लगभग 5-10 फ़ोटो तक स्केल करता है; उससे आगे, सहेजे गए प्रीसेट पैकों के साथ Photoshop, Lightroom, Capture One, या VSCO सही उपकरण हैं।

क्या फ़िल्टरों का क्रम मायने रखता है?

अधिकांश फ़िल्टरों के लिए, नहीं: चमक फिर कंट्रास्ट वही आउटपुट देता है जो कंट्रास्ट फिर चमक देता है। चमक, कंट्रास्ट, saturate, sepia, ग्रेस्केल, hue-rotate, और invert के लिए CSS फ़िल्टर फ़ंक्शन सभी एक-दूसरे के साथ क्रम-स्वतंत्र हैं। ब्लर अपवाद है: रंग परिवर्तन से पहले लागू ब्लर मूल किनारों को प्रभावित करता है; बाद में लागू ब्लर रंग-स्थानांतरित किनारों को प्रभावित करता है, और दोनों आउटपुट दृष्टिगत रूप से भिन्न होते हैं। व्यवहार में यह उपकरण सभी फ़िल्टरों को एक तय क्रम में लागू करता है, इसलिए प्रश्न केवल तभी मायने रखता है जब आप किसी अन्य उपकरण के सटीक प्रभाव की प्रतिकृति बनाने की कोशिश कर रहे हैं जो भिन्न क्रम का उपयोग करता है।

क्या यह उपकरण ऑफ़लाइन काम करता है?

हाँ। CSS फ़िल्टर इंजन, Canvas API, और JPEG, PNG, WebP, GIF, BMP, और AVIF के डिकोडर/एनकोडर सभी हर आधुनिक ब्राउज़र में अंतर्निहित हैं। फ़िल्टरिंग के लिए कोई बाहरी लाइब्रेरी डाउनलोड नहीं होती। पृष्ठ स्वयं एक बार लोड होने के बाद, बाद की विज़िट तब तक पूरी तरह ऑफ़लाइन काम करती हैं जब तक पृष्ठ ब्राउज़र कैश में रहता है। पहली विज़िट के बाद हवाई-जहाज़ मोड चालू करके और एक स्थानीय छवि पर फ़िल्टर लागू करके सत्यापित करें।

क्या डाउनलोड की गई छवि में EXIF मेटाडेटा संरक्षित होगा?

नहीं। Canvas-आधारित पुनः-एनकोडिंग EXIF (कैमरा, लेंस, एक्सपोज़र, GPS, कैप्चर तारीख), XMP, IPTC मेटाडेटा ब्लॉक, और अंतर्निहित ICC रंग प्रोफ़ाइल छोड़ देती है। डाउनलोड की गई छवि केवल पिक्सेल डेटा रखती है। सोशल मीडिया साझाकरण के लिए यह आम तौर पर वांछनीय है (GPS निर्देशांक और डिवाइस सीरियल नंबर लीक नहीं होते)। अभिलेखीय या फ़ोटोग्राफ़िक प्रवाह के लिए जहाँ मेटाडेटा महत्वपूर्ण है, Photoshop या Lightroom जैसे डेस्कटॉप संपादक का उपयोग करें जो निर्यात में मेटाडेटा संरक्षित करते हैं।

क्या कोई डेस्कटॉप या कमांड-लाइन समकक्ष है?

कई हैं। बैच-स्वचालन के लिए, ImageMagick के -brightness-contrast, -modulate और संबंधित ऑपरेटर किसी भी शेल से वही रूपांतरण लागू करते हैं। Node.js में Sharp के पास एक पूर्ण समायोजन API है। Python में Pillow ImageEnhance.Brightness, ImageEnhance.Contrast, ImageEnhance.Color और समान कक्षाएँ प्रदान करता है। डेस्कटॉप पर संवादात्मक काम के लिए, Photoshop, Lightroom (पेशेवर मानक), Affinity Photo, GIMP, और Pixelmator Pro सभी समान संक्रियाओं के साथ-साथ चयनात्मक संपादन के लिए परत मास्किंग प्रदान करते हैं।

संबंधित टूल