लोकलस्टोरेज में इमेज को कैसे सेव करें और अगले पेज पर प्रदर्शित करें?

Question

इसलिए, मूल रूप से, मुझे एक एकल छवि अपलोड करने की आवश्यकता है, इसे लोकलस्टोरेज में सहेजें, फिर इसे अगले पृष्ठ पर प्रदर्शित करें।

वर्तमान में, मेरा HTML फ़ाइल अपलोड है:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

जो इस फंक्शन का उपयोग पेज पर इमेज प्रदर्शित करने के लिए करता है

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

उपयोगकर्ता को देखने के लिए पृष्ठ पर छवि को तुरंत प्रदर्शित किया जाता है। फिर उन्हें बाकी फॉर्म भरने के लिए कहा जाता है। यह हिस्सा पूरी तरह से काम कर रहा है।

एक बार फॉर्म पूरा हो जाने के बाद, वे फिर 'सेव' बटन दबाते हैं। एक बार जब यह बटन दबाया जाता है, तो मैं localStorageस्ट्रिंग्स के रूप में सभी फॉर्म इनपुट सहेजता हूं । मुझे एक localStorageआइटम के रूप में छवि को बचाने के लिए एक तरीका भी चाहिए ।

सेव बटन उन्हें एक नए पेज पर भी निर्देशित करेगा। यह नया पृष्ठ उपयोगकर्ताओं के डेटा को एक तालिका में प्रदर्शित करेगा, जिसमें छवि सबसे ऊपर है।

इतना सादा और सरल, मुझे localStorageएक बार 'सेव' बटन दबाने के बाद इमेज को सेव करना होगा , और फिर अगले पेज से इमेज को लोन देना होगा localStorage।

मुझे इस फिडल और moz पर इस लेख जैसे कुछ समाधान मिले : // a HACKS ।

हालांकि मैं अभी भी इस उलझन में हूं कि यह कैसे काम करता है, और मुझे केवल एक सरल समाधान की आवश्यकता है। असल में, मुझे सिर्फ getElementByIDएक बार 'सेव' बटन दबाकर इमेज ढूंढनी है, और फिर इमेज को प्रोसेस और सेव करना है।

Comments

इस तरह के उदाहरण में स्थानीय स्टोर में रीडर.result संग्रहीत करने में क्या गलत है: jsfiddle.net/x11joex11/9g8NN ?

— ट्रेस

लोकलस्टोरेज

— LZ-

"मुझे केवल एक सरल समाधान की आवश्यकता है।" हर कोई नहीं करता है?

— रॉड्रिगो

Answer 1

जिस किसी को भी इस समस्या को हल करने की आवश्यकता है:

सबसे पहले, मैं अपनी छवि को साथ रखता हूं getElementByID, और छवि को बेस 64 के रूप में सहेजता हूं । तब मैं बेस 64 स्ट्रिंग को अपने localStorageमूल्य के रूप में सहेजता हूं ।

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

यहाँ वह कार्य है जो छवि को बेस 64 स्ट्रिंग में परिवर्तित करता है:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

फिर, अपने अगले पृष्ठ पर मैंने एक रिक्त के साथ एक चित्र बनाया, srcजैसे:

<img src="" id="tableBanner" />

और सीधे जब पृष्ठ लोड होता है, मैं बेस64 स्ट्रिंग से प्राप्त करने के लिए इन तीन पंक्तियों का उपयोग करता हूं localStorage, और इसे उस रिक्त छवि पर लागू करता srcहूं जिसे मैंने लिया है:

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

काफी अलग ब्राउज़रों और संस्करणों में इसका परीक्षण किया, और यह काफी अच्छी तरह से काम करता है।

Comments

Gif समर्थन नहीं है, क्योंकि gif कैनवास द्वारा समर्थित नहीं है।

— एलन

आपको getBase64Image फ़ंक्शन की आवश्यकता नहीं है। डेटा यूआरएल पहले से ही बेस 64 है, इसलिए जब आप Reader.readAsDataURL को कॉल करते हैं, तो e.arget.result रीडर.onload हैंडलर को भेजा जाता है, जिसकी आपको आवश्यकता होगी।

— जेम्स एच। केली

ध्यान रखें कि स्थानीय / सत्र भंडारण के लिए लगभग 5MB की सीमा है। और द्विआधारी छवि को आधार 64 एन्कोडेड स्ट्रिंग में परिवर्तित करने से यह लगभग 30% बड़ा हो जाएगा। तो यह उच्च संकल्प छवियों के लिए काम नहीं करेगा।

— नोएल अब्राहम

आप डेटा url का आरंभिक भाग क्यों छीनते हैं? आकार कम करने के लिए?

— deostroll

ध्यान दें कि आपको पहले पूरी तरह से छवि लोड करने की आवश्यकता है (अन्यथा खाली चित्र रखने में समाप्त हो रही है), इसलिए कुछ मामलों में आपको हैंडलिंग को लपेटने की आवश्यकता होगी: बैनरImage.addEventListener ("लोड", फ़ंक्शन () {});

— YE

Answer 2

मैंने स्थानीयस्टेजेज JQueryImageCaching उपयोग में छवि को बचाने के लिए 2,2kb पुस्तकालय लिखा है :

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>

Comments

2.2 किलोबाइट्स इस तरह के कुछ के लिए बहुत बड़ा है, साथ ही मैं अनुमान लगा रहा हूं कि खुद jQuery के आकार में भी कारक नहीं है। मैं इसे jQuery के बिना लिखने का सुझाव दूंगा, शायद यह छोटा होगा

— क्रिसब्रोनी 55

१. 1.४ KB के अनुसार गिटबब

— हकीको

Answer 3

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

Answer 4

"ध्यान दें कि आपको पहले पूरी तरह से लोड की गई छवि की आवश्यकता है (अन्यथा खाली चित्र रखने में समाप्त हो रही है), इसलिए कुछ मामलों में आपको हैंडलिंग को लपेटने की आवश्यकता होगी: bannerImage.addEventListener (" लोड ", फ़ंक्शन () {}); - 13 नवंबर को युगा 1 '17 "

यह अत्यंत महत्वपूर्ण है। विकल्पों में से एक जो मैं इस दोपहर की खोज कर रहा हूँ, वह जावास्क्रिप्ट कॉलबैक विधियों का उपयोग कर रहा है बजाय addEventListeners के क्योंकि यह भी सही ढंग से बांधने के लिए प्रतीत नहीं होता है। पृष्ठ ताज़ा करने से पहले पृष्ठ लोड होने से पहले सभी तत्वों को प्राप्त करना महत्वपूर्ण है।

अगर कोई भी इस पर विस्तार कर सकता है तो कृपया - जैसा कि, आपने वांछित परिणाम प्राप्त करने के लिए एक सेटटाइम, एक प्रतीक्षा, एक कॉलबैक या एक AddEventListener विधि का उपयोग किया। कौन सा और क्यों?

Comments

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

— ग्रेसन

Answer 5

मैं एक ही मुद्दे के साथ आया हूं, छवियों को संग्रहीत करने के बजाय, जो अंततः स्थानीय भंडारण को ओवरफ्लो करता है, आप बस छवि को पथ संग्रहीत कर सकते हैं। कुछ इस तरह:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);