सर्वर से एक छवि पुनर्प्राप्त करें, इसे स्थानीय स्टोरेज में संग्रहीत करें, और इसे

Question

प्रदर्शित करें यह काफी आसान होना चाहिए, लेकिन घंटों तक इसके साथ कुश्ती के बाद, मैं अभी भी इसे काम नहीं कर सकता। अब तक, मेरे सभी प्रयासों के परिणामस्वरूप छवि को 'भ्रष्ट या छोटा कर दिया गया है', फ़ायरफ़ॉक्स के अनुसार।

एक jQuery-ajax कॉल के साथ सर्वर से छवि प्राप्त करें:

$.ajax({ 
       async: false, 
       url: db[key]["DocumentLink"], 
       success: function (result2) { 

Base64 छवि सांकेतिक शब्दों में बदलना, और localStore में संग्रहीत:
इस उदाहरण में मैं jQuery बेस 64 एन्कोडिंग उपयोग कर रहा हूँ प्लगइन, लेकिन मैंने कई कोशिश की है।

     var dbKey = "Doc " + db[key]["ID"] + " " + db[key]["Title"]; 
         console.log("storing: " + db[key]["DocumentLink"] + " in " + dbKey + "\n"); 
         localStorage.removeItem(dbKey); 
         var base64Image = $.base64Encode(result2); 
         console.log(base64Image.length); 
         localStorage.setItem(dbKey, base64Image); 
         console.log("is stored: " + db[key]["DocumentLink"] + " in " + dbKey + "\n"); 
       } 
}) 

प्रदर्शन एक डेटा यूआरएल के साथ छवि:

function openImageFromDB(dbKey) { 
    console.log("Trying to display image with key " + dbKey); 
    var base64Img = localStorage.getItem(dbKey); 
    document.getElementById("documentHolder").src='data:image/jpeg;base64,' + base64Img; 
} 

इसी img:

<img id="documentHolder" alt="Image view placeholder" src="" /> 

हालांकि, हर कोशिश पर, फ़ायरफ़ॉक्स प्रदर्शित करता है:

Image corrupt or truncated: data:image/jpeg;base64,77+977+977+977+9a<... much longer string> 

यूआरएल: एक वैध जेपीईजी छवि को इंगित करता है, और base64Image.length और त्रुटि संदेश दिखाता है कि var/localStorage में वास्तव में बेस 64 एन्कोडेड डेटा लगता है।

कोई विचार?

Answer 1

• डेमो:http://so.devilmaycode.it/retrieve-an-image-from-the-server-store-it-in-localstorage-and-display-it

जावास्क्रिप्ट (AJAX कॉल)

function LoadImg(filename) { 
    var xmlhttp; 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
      document.getElementById("documentHolder").src = "data:image/png;base64," + xmlhttp.responseText; 
     } 
    };  
    xmlhttp.open("GET", 'load.php?LoadImg='+filename); 
    xmlhttp.send(null); 
} 

पीएचपी (load.php)

<?php 
if (isset($_GET['LoadImg'])) { 
    header("Content-Type: image/png"); 
    $file = file_get_contents($_GET['LoadImg']); 
    echo base64_encode($file); 
} 
?> 

---

पढ़ें यह आपकी मदद कर सकता है:

• Base 64 encode vs loading an image file
• How to encode image data within an HTML file?
• How can you encode a string to Base64 in JavaScript?
• Get image data in JavaScript?

पुनश्च: हो सकता है आपके Base64 गलत क्या है?

Answer 2

बाहर निकलता है, AJAX का उपयोग बाइनरी डेटा को विश्वसनीय रूप से स्थानांतरित करने के लिए नहीं किया जा सकता है। समाधान बेस 64 एन्कोडिंग सर्वर-साइड को चलाने के लिए है, और परिणामी स्ट्रिंग को AJAX के माध्यम से स्थानांतरित करना है।

उपरोक्त php-code काम करता है। जो कोई भी एक ASP.Net/सी # समाधान की तलाश में है के लिए:

public string Image(string relpath) 
    { 
     Response.ContentType = "image/jpeg"; 

     string base64; 
     string filename = Request.PhysicalApplicationPath + relpath; 
     try 
     { 
      using (var fs = new FileStream(filename, FileMode.Open, FileAccess.Read)) 
      { 
       var buffer = new byte[fs.Length]; 
       fs.Read(buffer, 0, (int)fs.Length); 
       base64 = Convert.ToBase64String(buffer); 
      } 
     } 
     catch (IOException e) 
     { 
      return filename + "/" + e.Message; 
     } 
     return base64; 
    } 

कृपया ध्यान दें कि इस कोड को बाहर की दुनिया के लिए सीधे बेनकाब करने के लिए सुरक्षित नहीं है। मैं व्यक्तिगत रूप से एक रैपर-फ़ंक्शन का उपयोग करता हूं जो एक डीबी से पथ को पार करता है।

Answer 3

आप एचटीएमएल 5 कैनवास तत्व का उपयोग कर जावास्क्रिप्ट के माध्यम से डेटा यूरी (जिसमें बेस 64 एन्कोडिंग होगा) प्राप्त कर सकते हैं।

 // I'm assuming here you've put the image in an <img> tag on the page already. 
     // If not, you'll need to adapt this a bit, or perhaps this approach is just 
     // not right for your situation. 
     var image = document.getElementById('id-of-image-you-want'); 

     var canvas = w.document.createElement("canvas"); 
     canvas.width = image.width; 
     canvas.height = image.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(image, 0, 0); 
     try { 
      var dataUri = canvas.toDataURL();  
     } catch (e) { 
      console.log("D'oh!"); // Improve this error handling, obviously. 
     } 

dataUri अब छवि है जो, शामिल होंगे एक छोटी उपसर्ग, छवि के आधार 64 एन्कोडिंग के साथ साथ के लिए डेटा uri शामिल होंगे।

कैनवास समर्थन के लिए पहचान जोड़ना सुनिश्चित करें। आईई 8 और पुराने इसका समर्थन नहीं करते हैं।

Answer 4

ब्राउज़रों के पास 5 एमबी की स्थानीय स्टोरेज सीमा के अलावा आकार सीमाएं हैं। <img src="data:image/jpeg;base64,..."> के लिए डेटा भी प्रतिबंधित है और आमतौर पर 5 एमबी से कम है। इसके आस-पास का सबसे आसान तरीका स्थानीय स्टोरेज के माध्यम से फ़ाइल-नामों को पास करना है और ब्राउज़र कैशिंग को काम करने देना है।