स्थानीय स्टोरेज में छवि स्टोर करें

हैई वर्तमान में जेसन से एक छवि प्राप्त करने के लिए एक पृष्ठ के साथ काम कर रहा है और localy स्टोर करना चाहता हूँ .. यह मेरा कोड है ...

<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="eventorig.json"></script>

</head>
<body>
    
</body>
<script>
var url;

$(".imageClass").attr("src",localStorage.UrlImage);
for(var i in jsonData)
        {
            for(var j in jsonData[i].Events)
                {

        for(var key in  jsonData[i].Events[j].Images)  

                    {



        url=jsonData[i].Events[j].Images[key].ImageUrl;

    if(typeof(Storage)!=="undefined")
                    {

                localStorage.UrlImage=url;

                          }
                        else
                          {

   document.getElementById("result").innerHTML="Sorry, your browser does not support  
         web   storage...";

                          }


                    }
                }
    console.log($(".imageClass").attr("src"));      
        }
  </script>
    </html>

और नीचे मेरा जेसन है

       var jsonData={"ResponseCode":0,
       "ApiVersion":0,
        "Data":
         {"Events":

               [
            {
                "Id":1124,
                "ImageCaption":"Hip flask",
                "ImageUrl":"https://s3-ap-southeast-
                                      2.amazonaws.com/drugdetectionapp-
                                      media/1004/alcohol_para.jpg",
                "Description":"des",
                "DateUpdated":"2013-11-06T16:55:55"
            },
                        ]

मैं इसे से छवि प्राप्त कर रहा हूं लेकिन मैं इसे स्थानीय रूप से स्टोर नहीं कर सकता, मैंने लंबे समय से खोज की है Iam केवल कैनवास का उपयोग कर समाधान प्राप्त कर रहा हूं .. यहां मैं कैनवास के अलावा अन्य समाधान ढूंढ रहा हूं क्या यह संभव है ?? ... आपके वालबल आदेशों की प्रतीक्षा कर रहा है धन्यवाद

1
जोड़ा संपादित
विचारों: 1
ध्यान दें कि आप अंतरिक्ष समस्याओं में भाग ले सकते हैं क्योंकि स्थानीय भंडारण केवल कुछ एमबी डेटा में स्टोर करने की अनुमति देता है।
जोड़ा लेखक helpermethod, स्रोत
मुझे लगता है कि आप इसे आधार 64 एन्कोडेड स्ट्रिंग के रूप में स्टोर कर सकते हैं ...
जोड़ा लेखक BenM, स्रोत
तो मैं छवियों को कैसे स्टोर कर सकता हूं .... यह संभव नहीं है
जोड़ा लेखक Manu, स्रोत
मैं इसे कैसे परिवर्तित करना चाहिए Iam बस इसके लिए नया
जोड़ा लेखक Manu, स्रोत
localStorage केवल तारों को स्टोर कर सकता है - आपको छवि को किसी प्रकार के प्रारूप में क्रमबद्ध करना होगा।
जोड़ा लेखक Qantas 94 Heavy, स्रोत

2 उत्तर

आप एक बाइनरी XMLHttpRequest के माध्यम से इमेज डाउनलोड करने का प्रयास कर सकते हैं, फिर कच्चे बाइनरी डेटा को base64 में कनवर्ट करें और इसे स्टोर करें।

उसी मूल नीति से अवगत रहें, http://en.wikipedia.org/wiki/Same- origin_policy

कोड इस तरह दिखना चाहिए:

var req = new XMLHttpRequest();
req.open("GET", https://s3-ap-southeast-2.amazonaws.com/drugdetectionapp-media/1004/alcohol_para.jpg", true);
req.responseType = "arraybuffer";

req.onload = function (event) {
  var buffer = req.response;
  if (buffer) {
    var byteArray = new Uint8Array(buffer);
   //Maybe you could also use buffer directly here...
    var b64 = btoa(byteArray);
    localStorage.setItem("imageData", b64); 
  }
};
req.send(null);

}

3
जोड़ा

Here you have example how you can convert your image to string and then save it in localStorage. A bit complex but maybe will help you. How to store and retrieve image to localStorage?

0
जोड़ा
@ एससीएक्स: आपके रीप्ले के लिए धन्यवाद .. लेकिन मैं कैनवास का उपयोग नहीं कर सकता ... क्या अन्य समाधान हैं ... ??
जोड़ा लेखक Manu, स्रोत
क्षमा करें, लेकिन प्रश्नकर्ता ने " कैनवास के अलावा समाधान " के लिए पूछा ... "आप शायद यह ध्यान रखना चाहें कि यह आमतौर पर उत्तर के लिए एक लिंक पोस्ट करने के लिए तैयार है - उत्तरों को समझने में सक्षम होना चाहिए लिंक के बिना अपने आप पर (हालांकि निश्चित रूप से आप अपने उत्तर का समर्थन करने के लिए लिंक का उपयोग कर सकते हैं)। यदि आप ऐसा करना चाहते हैं, तो आप इस उद्देश्य के लिए एक टिप्पणी का उपयोग कर सकते हैं।
जोड़ा लेखक Qantas 94 Heavy, स्रोत
सबमिट किए गए लिंक में दिए गए उत्तर का अच्छा हिस्सा FileReader के बारे में था, लेकिन आपके पास स्थानीय रूप से फ़ाइल नहीं है। हो सकता है कि आप अन्य स्टोरेज विकल्प का उपयोग कर सकें जैसे फ़ाइल को HTML5 फाइल सिस्टम ( html5rocks.com पर फ़ाइल लिखना/en/ट्यूटोरियल/फ़ाइल/फाइल सिस्टम ) या इंडेक्स डीडी में इसे छेड़छाड़ कर रहे हैं?
जोड़ा लेखक scx, स्रोत