वेनिला जावास्क्रिप्ट के साथ एक छवि आवर्धक कैसे बनाएं

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

एक छवि आवर्धक को सहज और सुसंगत तरीके से बनाना एक चुनौती हो सकती है। लेकिन इन चरणों के माध्यम से चलने से आपको स्क्रैच से अपना स्वयं का छवि आवर्धक बनाने में मदद मिलेगी, बिना किसी तीसरे पक्ष के प्लगइन्स पर भरोसा करने की आवश्यकता होगी।

अपने वेब प्रोजेक्ट में इमेज मैग्निफ़ायर का उपयोग कब करें

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

ग्राहक किसी उत्पाद की गुणवत्ता, विशेषताओं और स्वरूप का आकलन करने के लिए वेबसाइट द्वारा प्रदान की गई जानकारी और दृश्यों पर पूरी तरह भरोसा करते हैं। हालाँकि, अकेले स्थिर छवियां हमेशा पर्याप्त स्पष्टता प्रदान नहीं कर सकती हैं या आइटम के व्यापक मूल्यांकन की अनुमति नहीं दे सकती हैं।

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

यदि आप हैं तो छवि आवर्धक भी आपके काम आ सकते हैं एक फोटो गैलरी एप्लिकेशन का निर्माण चूँकि छवि के किसी विशिष्ट भाग को ज़ूम करना एक महत्वपूर्ण विशेषता है।

छवि आवर्धक का निर्माण

इस प्रोजेक्ट में प्रयुक्त कोड a में उपलब्ध है गिटहब रिपॉजिटरी और यह आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए निःशुल्क है।

एक फ़ोल्डर बनाएं और, उस फ़ोल्डर में, एक जोड़ें Index.html फ़ाइल, स्टाइल.सीएसएस फ़ाइल और मुख्य.जे.एस फ़ाइल। इस बॉयलरप्लेट कोड को Index.html में जोड़ें:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8" />
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1.0" />
<शीर्षक>छवि आवर्धकशीर्षक>
<जोड़नारिले="शैली पत्रक"href="style.css" />
सिर>
<शरीर>
शरीर>
एचटीएमएल>

के अंदर शरीर टैग, क्लास नाम "हेडर" के साथ एक div तत्व बनाएं। फिर "हेडर" div में, एक जोड़ें एच 1 आपकी छवि आवर्धक का शीर्षक प्रदर्शित करने के लिए शीर्षक तत्व।

आप अपनी आवश्यकताओं के अनुरूप पाठ को अनुकूलित कर सकते हैं। इसके बाद, दो स्पैन तत्व शामिल करें जो आवर्धक का उपयोग करने के लिए निर्देश प्रदान करते हैं और उपयोगकर्ता को वर्तमान ज़ूम स्तर प्रदर्शित करते हैं।

हेडर सेक्शन के बाद, एक बनाएं डिव वर्ग नाम "कंटेनर" वाला तत्व। इस डिव के अंदर, क्लास नाम "मैग्निफायर" के साथ एक और डिव तत्व जोड़ें और इसे दृश्य से छिपाने के लिए "हिडन" क्लास लागू करें।

यह तत्व आवर्धक छवि का प्रतिनिधित्व करेगा. फिर, "src" विशेषता को "/main.js" पर सेट करके एक स्क्रिप्ट टैग जोड़ें।

<शरीर>
<डिवकक्षा="हेडर">
<एच 1>छवि आवर्धकएच 1>
<अवधि>प्रेस <मज़बूत>ऊपरी तीरमज़बूत> या <मज़बूत>नीचे दर्शित तीरमज़बूत> को
 ज़ूम स्तर बढ़ाएँ या घटाएँ।अवधि>
<अवधि>ज़ूम लेवल: <मज़बूतकक्षा="ज़ूम लेवल">1मज़बूत>अवधि>
डिव>
<डिवकक्षा="कंटेनर">
<डिवकक्षा="आवर्धक छिपा हुआ">डिव>
डिव>
<लिखी हुई कहानीस्रोत="/main.js">लिखी हुई कहानी>
शरीर>

कोड को इसमें बदलें स्टाइल.सीएसएस निम्नलिखित के साथ फाइल करें। आप a का भी उपयोग कर सकते हैं सीएसएस प्रीप्रोसेसर जैसे कम अगर आप चाहते हैं:

:जड़ {
--आवर्धक-चौड़ाई: 150;
--आवर्धक-ऊंचाई: 150;
}
शरीर {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: कॉलम;
संरेखित-आइटम: केंद्र;
}
.कंटेनर {
चौड़ाई: 400पिक्सल;
ऊंचाई: 300पिक्सल;
पृष्ठभूमि-आकार: ढकना;
पृष्ठभूमि छवि: यूआरएल("HTTPS के://सीडीएन.पिक्साबे.com/तस्वीर/2019/03/27/15/24/पशु-4085255_1280.jpg");
पृष्ठभूमि दोहराएँ: कोई दोहराने;
पद: रिश्तेदार;
कर्सर: कोई नहीं;
}
.आवर्धक {
बॉर्डर-त्रिज्या: 400पिक्सल;
डब्बे की छाया: 0पिक्सल 11पिक्सल 8पिक्सल 0पिक्सल#0000008a;
पद: शुद्ध;
चौड़ाई: कैल्क(वर(--आवर्धक-चौड़ाई) * 1पिक्सल);
ऊंचाई: कैल्क(वर(--आवर्धक-ऊंचाई) * 1पिक्सल);
कर्सर: कोई नहीं;
पृष्ठभूमि छवि: यूआरएल("HTTPS के://सीडीएन.पिक्साबे.com/तस्वीर/2019/03/27/15/24/पशु-4085255_1280.jpg");
पृष्ठभूमि दोहराएँ: कोई दोहराने;
}
अवधि {
दिखाना: अवरोध पैदा करना;
}
.शीर्षक {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: कॉलम;
संरेखित-आइटम: केंद्र;
}
।छिपा हुआ {
दृश्यता: छिपा हुआ;
}
डिव > अवधि:नवाँ बच्चा (3) {
फ़ॉन्ट आकार: 20पिक्सल;
}

में मुख्य.जे.एस फ़ाइल, वर्ग नाम, "आवर्धक" और "कंटेनर" के साथ HTML तत्वों को पुनः प्राप्त करें दस्तावेज़.querySelector विधि और उन्हें वेरिएबल्स को असाइन करें ताल और CONTAINER, क्रमश।

फिर, का उपयोग कर getComputedStyle फ़ंक्शन पुनः प्राप्त करें चौड़ाई और ऊंचाई आवर्धक तत्व का और फिर इसका उपयोग करके लौटाई गई स्ट्रिंग से संख्यात्मक मान निकालें सबस्ट्रिंग और के सूचकांक तरीके.

निकाली गई चौड़ाई को वेरिएबल पर असाइन करें आवर्धक चौड़ाई, और निकाली गई ऊँचाई आवर्धक ऊँचाई.

होने देना आवर्धक = दस्तावेज़.क्वेरी चयनकर्ता(".आवर्धक");
होने देना कंटेनर = दस्तावेज़.क्वेरी चयनकर्ता(".कंटेनर");
होने देना आवर्धकविड्थ = getComputedStyle (आवर्धक).width.substring(
0,
 getComputedStyle (आवर्धक).width.indexOf("पी")
);
होने देना आवर्धक ऊँचाई = getComputedStyle (आवर्धक).width.substring(
0,
 getComputedStyle (आवर्धक).height.indexOf("पी")
);

इसके बाद, ज़ूम स्तर, अधिकतम ज़ूम स्तर और कर्सर और आवर्धक छवि की स्थिति के लिए चर सेट करें।

होने देना ज़ूमलेवललेबल = दस्तावेज़.क्वेरी चयनकर्ता("।ज़ूम लेवल");
होने देना ज़ूम = 2;
होने देना मैक्सज़ूमलेवल = 5;
होने देना पॉइंटरएक्स;
होने देना सूचकY;
होने देना आवर्धनX;
होने देना बढ़ानाY;

उपरोक्त कोड ब्लॉक में, पॉइंटरएक्स और सूचकY दोनों एक्स और वाई अक्षों के साथ कर्सर की स्थिति का प्रतिनिधित्व करते हैं।

अब, दो सहायक कार्यों को परिभाषित करें: ज़ूमलेवल प्राप्त करें जो वर्तमान ज़ूम स्तर लौटाता है, और getPointerस्थिति जो किसी ऑब्जेक्ट को के साथ लौटाता है एक्स और य कर्सर के निर्देशांक.

समारोहज़ूमलेवल प्राप्त करें() {
वापस करना ज़ूम;
}
समारोहgetPointerस्थिति() {
वापस करना { एक्स: पॉइंटरएक्स, य: सूचकY }
}

इसके बाद, ऐड बनाएं updateMagImage फ़ंक्शन जो वर्तमान कर्सर स्थिति के साथ एक नया MouseEvent ऑब्जेक्ट बनाता है और इसे कंटेनर तत्व पर भेजता है। यह फ़ंक्शन आवर्धक छवि को अद्यतन करने के लिए ज़िम्मेदार है।

समारोहupdateMagImage() {
होने देना ईवीटी = नया माउसइवेंट("माउसमूव", {
 क्लाइंटएक्स: getPointerPosition().x,
 क्लाइंटY: getPointerPosition().y,
 बुलबुले: सत्य,
 रद्द करने योग्य: सत्य,
 देखना: खिड़की,
 });
 कंटेनर.डिस्पैचइवेंट (ईवीटी);
}

अब, आपको जोड़ना चाहिए एक घटना श्रोता "कीअप" ईवेंट के लिए विंडो ऑब्जेक्ट पर, जो उपयोगकर्ता द्वारा "एरोअप" या "एरोडाउन" कुंजी दबाने पर ज़ूम स्तर को समायोजित करता है।

"कीअप" इवेंट पर कॉलबैक फ़ंक्शन ज़ूम लेवल लेबल को अपडेट करने और ट्रिगर करने के लिए भी ज़िम्मेदार है updateMagImage समारोह।

खिड़की.addEventListener("तनाव के स्थिति में", (ई) => {
अगर (ई.कुंजी "ऊपरी तीर" && maxZoomLevel - संख्या(zoomLevelLabel.textContent) !== 0) {
 ZoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 ज़ूम = ज़ूम + 0.3;
 updateMagImage();
 }
अगर (ई.कुंजी "नीचे दर्शित तीर" && !(zoomLevelLabel.textContent <= 1)) {
 ZoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 ज़ूम = ज़ूम - 0.3;
 updateMagImage();
 }
});

फिर "माउसमूव" इवेंट के लिए कंटेनर तत्व में एक इवेंट श्रोता जोड़ें।

​​​​​​

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

इस फ़ंक्शन को आवर्धक की परिवर्तन शैली को परिकलित स्थिति पर भी सेट करना चाहिए, और ज़ूम स्तर और माउस के आधार पर आवर्धक छवि की पृष्ठभूमि का आकार और स्थिति निर्धारित करें पद।

कंटेनर.एडइवेंटलिस्टनर("माउसमूव", (ई) => {
 आवर्धक.वर्गसूची.निकालें("छिपा हुआ");
होने देना rect = कंटेनर.getBoundingClientRect();
होने देना x = e.pageX - rect.left;
होने देना y = e.pageY - rect.top;
 एक्स = एक्स - खिड़की.स्क्रॉलएक्स;
 आप = आप - खिड़की.स्क्रॉलY;
 आवर्धक.शैली.परिवर्तन = `अनुवाद(${x}पीएक्स, ${y}px)`;
कॉन्स्ट imgविड्थ = 400;
कॉन्स्ट imgऊंचाई = 300;
 आवर्धक.शैली.पृष्ठभूमिआकार =
 imgWidth * getZoomLevel() + "पीएक्स" + imgHeight * getZoomLevel() + "पीएक्स";
 मैग्निफाईएक्स = एक्स * गेटज़ूमलेवल() + 15;
 आवर्धनY = y * getZoomLevel() + 15;
 आवर्धक.शैली.पृष्ठभूमिस्थिति = -आवर्धकX + "पीएक्स" + -बढ़ानाY + "पीएक्स";
});

फिर कंटेनर तत्व में एक और ईवेंट श्रोता जोड़ें, लेकिन इस बार ईवेंट श्रोता को सुनना चाहिए "माउसआउट" ईवेंट और जब भी माउस कंटेनर से बाहर हो तो "छिपे हुए" वर्ग को आवर्धक तत्व में वापस जोड़ें क्षेत्र।

कंटेनर.एडइवेंटलिस्टनर("माउसआउट", () => {
 आवर्धक.वर्गसूची.जोड़ें("छिपा हुआ");
});

अंत में, "माउसमूव" इवेंट के लिए विंडो ऑब्जेक्ट में एक इवेंट श्रोता जोड़ें जो कर्सर की x और y स्थिति को अपडेट करता है।

खिड़की.addEventListener("माउसमूव", (ई) => {
 पॉइंटरएक्स = ई.क्लाइंटएक्स;
 पॉइंटरवाई = ई.क्लाइंटवाई;
});

इतना ही! आप वेनिला जावास्क्रिप्ट के साथ एक छवि आवर्धक बनाने में कामयाब रहे हैं।

कैसे छवि आवर्धक उपयोगकर्ता अनुभव को बेहतर बनाते हैं

उपयोगकर्ताओं को छवि के विशिष्ट क्षेत्रों पर ज़ूम करने की अनुमति देकर, एक आवर्धक उन्हें अधिक स्पष्टता के साथ उत्पाद विवरण की जांच करने देता है।

दृश्य अन्वेषण का यह उन्नत स्तर उपयोगकर्ताओं में आत्मविश्वास पैदा करता है क्योंकि वे सूचित निर्णय ले सकते हैं। यह रूपांतरण दरों में वृद्धि और बेहतर ग्राहक प्रतिधारण में योगदान दे सकता है।