क्या जावास्क्रिप्ट के साथ क्लाइंट-साइड छवि का आकार बदलना संभव है?
2024-11-04 को प्रकाशित
ब्राउज़ करें:169
अपलोड करने से पहले जावास्क्रिप्ट के साथ क्लाइंट-साइड छवि का आकार बदलना
छवियों का आकार बदलना क्लाइंट-साइड सर्वर पर अपलोड करने से पहले कई फायदे प्रदान करता है। यह सर्वर लोड को कम करता है, पेज रेंडरिंग को गति देता है, और एक बेहतर उपयोगकर्ता अनुभव प्रदान करता है।
क्या क्लाइंट-साइड जावास्क्रिप्ट छवि का आकार बदलना संभव है?
हां, यह संभव है जावास्क्रिप्ट का उपयोग करके क्लाइंट-साइड छवियों का आकार बदलें। ऐसे ओपन-सोर्स एल्गोरिदम उपलब्ध हैं जो फ्लैश का सहारा लिए बिना आकार बदलने में सक्षम हैं।
क्लाइंट-साइड इमेज आकार बदलने के लिए एल्गोरिदम
ऐसा एक एल्गोरिदम GitHub पर उपलब्ध है: https: //gist.github.com/dcollien/312bce1270a5f511bf4a. इसमें ES6 और वेनिला जावास्क्रिप्ट दोनों संस्करण शामिल हैं जिन्हें किसी भी वेब एप्लिकेशन में एम्बेड किया जा सकता है।
उदाहरण उपयोग
एल्गोरिदम का उपयोग करने के लिए:
- प्रदान किए गए जावास्क्रिप्ट कोड को अपने वेब पेज में एम्बेड करें।
- फ़ाइल चयन के लिए एक इनपुट परिभाषित करें और संशोधित छवि प्रदर्शित करने के लिए एक छवि टैग निर्दिष्ट करें।
- इनपुट के लिए ऑनचेंज इवेंट श्रोता में, एल्गोरिथम द्वारा प्रदान किए गए आकार परिवर्तन फ़ंक्शन को लागू करें। वांछित आयाम और एक कॉलबैक फ़ंक्शन निर्दिष्ट करें। संशोधित छवि का पूर्वावलोकन करने के लिए छवि टैग। और इष्टतम संगतता के लिए पॉलीफ़िल लागू करता है।
- एनिमेटेड GIF छवियों को उनकी अखंडता बनाए रखने के लिए अनदेखा करता है।
विज्ञप्ति वक्तव्य
यह लेख यहां पुनर्मुद्रित है: 1729303577 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए स्टडी_गोलंग@163.कॉम से संपर्क करें।
नवीनतम ट्यूटोरियल
अधिक>
-
जेएस और मूल बातेंजावास्क्रिप्ट और प्रोग्रामिंग फंडामेंटल के लिए एक शुरुआती मार्गदर्शिका जावास्क्रिप्ट (जेएस) एक शक्तिशाली और बहुमुखी प्रोग्रामिंग भाषा है जिसका उपयोग म...प्रोग्रामिंग 2024-11-17 को प्रकाशित -
मैं MySQL का उपयोग करके आज के जन्मदिन वाले उपयोगकर्ताओं को कैसे ढूँढ सकता हूँ?MySQL का उपयोग करके आज के जन्मदिन वाले उपयोगकर्ताओं की पहचान कैसे करेंMySQL का उपयोग करके यह निर्धारित करना कि आज उपयोगकर्ता का जन्मदिन है या नहीं, इस...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
नम्पी चीट शीटComprehensive Guide to NumPy: The Ultimate Cheat Sheet NumPy (Numerical Python) is a fundamental library for scientific computing in Python. ...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
MacOS पर Django में \"अनुचित रूप से कॉन्फ़िगर किया गया: MySQLdb मॉड्यूल लोड करने में त्रुटि\" को कैसे ठीक करें?MySQL अनुचित रूप से कॉन्फ़िगर किया गया: सापेक्ष पथों के साथ समस्याDjango में Python मैनेज.py runserver चलाते समय, आपको निम्न त्रुटि का सामना करना पड़ ...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
`if` कथनों से परे: स्पष्ट `bool` रूपांतरण वाले प्रकार को कास्टिंग के बिना और कहाँ उपयोग किया जा सकता है?बूल में प्रासंगिक रूपांतरण बिना कास्ट के स्वीकृतआपकी कक्षा बूल में एक स्पष्ट रूपांतरण को परिभाषित करती है, जिससे आप सीधे सशर्त बयानों में इसके उदाहरण ...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
PHP के फ़ंक्शन पुनर्परिभाषा प्रतिबंधों पर कैसे काबू पाएं?PHP की फ़ंक्शन पुनर्परिभाषा सीमाओं पर काबू पानाPHP में, एक ही नाम के साथ एक फ़ंक्शन को कई बार परिभाषित करना एक नो-नो है। ऐसा करने का प्रयास करने पर, ज...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
मारता है आपको एक पेशेवर की तरह तकनीकी लेख पढ़ने की ज़रूरत हैप्रौद्योगिकी की तेज़ गति वाली दुनिया में, आप जो कुछ भी पढ़ते हैं वह सटीक या निष्पक्ष नहीं होता है। आपने जो कुछ भी पढ़ा वह किसी इंसान द्वारा नहीं लिखा ...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
सरणीतरीके एफएनएस हैं जिन्हें ऑब्जेक्ट पर कॉल किया जा सकता है ऐरे ऑब्जेक्ट हैं, इसलिए जेएस में उनके तरीके भी हैं। स्लाइस (शुरू): मूल सरणी को बदले ब...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
एक बहुआयामी सरणी में मौजूद पंक्तियों को कैसे खोजें लेकिन दूसरे में नहीं?बहुआयामी सारणियों की सहयोगी पंक्तियों की तुलनाआपके पास दो बहुआयामी सारणियां हैं, $पेजआईडी और $पेरेंटपेज, जहां प्रत्येक पंक्ति कॉलम के साथ एक रिकॉर्ड क...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
विंडोज़ में ''जावा पहचाना नहीं गया'' त्रुटि क्यों हो रही है और इसे कैसे ठीक करें?विंडोज में "जावा पहचाना नहीं गया है" त्रुटि को हल करनाविंडोज 7 पर जावा के संस्करण की जांच करने का प्रयास करते समय, उपयोगकर्ताओं को त्रुटि का...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
फ़ाइल अस्तित्व और अनुमतियों के बावजूद File.delete() गलत रिटर्न क्यों देता है?File.delete() अस्तित्व और अनुमतियों की जांच के बावजूद गलत रिटर्न देता हैFileOutputStream का उपयोग करके किसी फ़ाइल को लिखने के बाद उसे हटाने का प्रयास ...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
गो में एक स्लाइस से डुप्लिकेट पियर्स को कुशलतापूर्वक कैसे हटाएं?एक स्लाइस से डुप्लिकेट आइटम हटानाएक टेक्स्ट फ़ाइल दी गई है जिसमें "पता" और "पीयरआईडी" के साथ ऑब्जेक्ट के रूप में दर्शाए गए समकक्षो...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
मैं अद्वितीय आईडी को संरक्षित करते हुए और डुप्लिकेट नामों को संभालते हुए PHP में दो सहयोगी सरणियों को कैसे जोड़ूं?PHP में एसोसिएटिव एरेज़ का संयोजनPHP में, दो एसोसिएटिव एरेज़ को एक ही एरे में संयोजित करना एक सामान्य कार्य है। निम्नलिखित अनुरोध पर विचार करें:समस्या...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
बूटस्ट्रैप 4 के फ़ाइल इनपुट घटक को कैसे अनुकूलित करें?बूटस्ट्रैप 4 के फ़ाइल इनपुट की सीमाओं को पार करनाबूटस्ट्रैप 4 उपयोगकर्ताओं के लिए फ़ाइल चयन को सरल बनाने के लिए एक कस्टम फ़ाइल इनपुट घटक प्रदान करता ह...प्रोग्रामिंग 2024-11-17 को प्रकाशित
-
जावास्क्रिप्ट ऑब्जेक्ट्स में कुंजी को गतिशील रूप से कैसे सेट करें?जावास्क्रिप्ट ऑब्जेक्ट वेरिएबल के लिए डायनामिक कुंजी कैसे बनाएंजावास्क्रिप्ट ऑब्जेक्ट के लिए डायनामिक कुंजी बनाने का प्रयास करते समय, इस सिंटैक्स का उ...प्रोग्रामिंग 2024-11-17 को प्रकाशित
चीनी भाषा का अध्ययन करें
- 1 आप चीनी भाषा में "चलना" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 2 आप चीनी भाषा में "विमान ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 3 आप चीनी भाषा में "ट्रेन ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 4 आप चीनी भाषा में "बस ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 5 चीनी भाषा में ड्राइव को क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 6 तैराकी को चीनी भाषा में क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 7 आप चीनी भाषा में साइकिल चलाने को क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 8 आप चीनी भाषा में नमस्ते कैसे कहते हैं? 你好चीनी उच्चारण, 你好चीनी सीखना
- 9 आप चीनी भाषा में धन्यवाद कैसे कहते हैं? 谢谢चीनी उच्चारण, 谢谢चीनी सीखना
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
