जावास्क्रिप्ट के साथ क्लाइंट-साइड पर छवि का आकार बदलना: एक ओपन सोर्स समाधान

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

जबकि फ्लैश छवि आकार बदलने के लिए एक आम विकल्प रहा है, कई डेवलपर्स इसके उपयोग से बचना पसंद करते हैं। सौभाग्य से, एक समाधान है जो छवियों का आकार प्रभावी ढंग से आकार बदलने के लिए जावास्क्रिप्ट का उपयोग करता है। .github.com/dcollien/312bce1270a5f511bf4a) क्लाइंट-साइड छवियों का आकार बदलने के लिए एक विश्वसनीय तरीका प्रदान करता है। यह एक ES6 संस्करण और एक .js संस्करण प्रदान करता है जिसे स्क्रिप्ट टैग में शामिल किया जा सकता है।

कार्यान्वयन

आकार बदलने वाले एल्गोरिदम को लागू करने के लिए, इन चरणों का पालन करें:

नीचे दिखाए अनुसार HTML कोड जोड़ें:

1. नीचे जावास्क्रिप्ट कोड जोड़ें:

document.getElementById('select').onchange = function(evt) { ImageTools.resize(this.files[0], { चौड़ाई: 320, // अधिकतम चौड़ाई ऊंचाई: 240 // अधिकतम ऊंचाई }, फ़ंक्शन (ब्लॉब, madeItResize) { // यदि यह इसका आकार बदलने में कामयाब रहा तो doItResize सत्य होगा, अन्यथा गलत (और मूल फ़ाइल को 'ब्लॉब' के रूप में लौटाएगा) document.getElementById('पूर्वावलोकन').src = window.URL.createObjectURL(blob); // अब आप इस ब्लॉब को XHR का उपयोग करके भी अपलोड कर सकते हैं। }); };

2. विशेषताएं और समर्थन

document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};

निर्दिष्ट अधिकतम चौड़ाई के आधार पर आकार बदलना और ऊंचाई

ब्राउज़रों में संगतता के लिए समर्थन पहचान और पॉलीफ़िल

दक्षता के लिए एनिमेटेड GIF का बहिष्करण