从服务器检索的图像，其存储在localStorage的，并显示它 [英] Retrieve an image from the server, store it in localStorage, and display it

问题描述

这应该是很简单的，但与它搏斗了几个小时后，我仍然无法得到它的工作。到目前为止，我所有的尝试都导致了图像成为损坏或截断中，根据Firefox浏览器。

从服务器与一个jquery-ajax调用检索图像：

  $。阿贾克斯（{
                异步：假的，
                网址：DB [关键] [DocumentLink]，
                成功：函数（结果2）{
 

Base64的EN code中的图像，并将其存储在localStore：
在这个例子中，我使用jQuery的base64编码插件，但是我试了几个。

  VAR DBKEY =医生+ DB [关键] [ID] ++ DB [关键] [名称];
                        的console.log（存储+ DB [关键] [DocumentLink] +中的+ DBKEY +\ N）;
                        localStorage.removeItem（DBKEY）;
                        VAR base64Image = $ .base64En code（结果2）;
                        执行console.log（base64Image.length）;
                        localStorage.setItem（DBKEY，base64Image）;
                       的console.log（存储+ DB [关键] [DocumentLink] +中的+ DBKEY +\ N）;
                }
}）
 

显示图像与数据链接：

 函数openImageFromDB（DBKEY）{
    的console.log（试图显示图像键+ DBKEY）;
    VAR base64Img = localStorage.getItem（DBKEY）;
    。的document.getElementById（documentHolder）SRC =数据：图像/ JPEG; BASE64，'+ base64Img;
}
 

相应的IMG：

 ＆LT; IMG ID =documentHolderALT =图像视图占位符SRC =/＆GT;
 

然而，在每一个尝试，火狐显示：

 图像损坏或截断：数据：为image / jpeg; base64,77 + 977 + 977 + 977 + 9A＆LT; ...更长串GT;
 

的网址：指向一个有效的JPEG图像，以及base64Image.length和错误信息表明，VAR / localStorage的实际包含的内容似乎是Base64的EN codeD数据

。

任何想法？

解决方案

  

  
• 演示： <一个href="http://so.devilmay$c$c.it/retrieve-an-image-from-the-server-store-it-in-localstorage-and-display-it" rel="nofollow">http://so.devilmay$c$c.it/retrieve-an-image-from-the-server-store-it-in-localstorage-and-display-it
  

的Javascript（AJAX调用）的

 函数LoadImg（文件名）{
    VAR XMLHTTP;
    如果（window.XMLHtt prequest）{// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
        XMLHTTP =新XMLHtt prequest（）;
    }其他{// code对IE6，IE5
        XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
    }
    xmlhttp.onreadystatechange =功能（）{
        如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）{
            。的document.getElementById（documentHolder）SRC =数据：图像/ PNG; BASE64，+ xmlhttp.responseText;
        }
    };
    xmlhttp.open（GET，load.php LoadImg =？'+文件名）;
    xmlhttp.send（空）;
}
 

PHP（load.php）的

 ＆LT; PHP
 如果（使用isset（$ _ GET ['LoadImg']））{
  标题（内容类型：图像/ PNG）;
  $文件=的file_get_contents（$ _ GET ['LoadImg']）;
  回声base64_en code（$文件）;
}
？＆GT;
 

---

阅读可以帮助你：

  

  
• 基地64 EN code VS负载图像文件
  
• 如何连接code在HTML文件中的图像数据？
  
• 你怎么能恩code到使用JavaScript的Base64？
  在Javascript中
• 获取图像数据？
  

PS：也许你的的Base64 错

This should be simple enough, but after wrestling with it for hours, I still can't get it to work. So far, all my attempts have resulted in the image becoming 'corrupted or truncated', according to firefox.

Retrieve the image from the server with a jquery-ajax call:

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

Base64 encode the image, and store it in localStore:
In this example I'm using the jquery base64-encoding plugin, but I've tried several.

                        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");
                }
})

Display the image with a data url:

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;
}

The corresponding img:

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

However, on every try, firefox displays:

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

The Url: points to a valid jpeg image, and the base64Image.length and the error message show that the var / localStorage actually contain what seems to be base64 encoded data.

Any ideas?

解决方案

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

Javascript (AJAX call)

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);
}

PHP ( load.php )

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

---

Read this may help you:

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

PS: maybe your Base64 is wrong?

这篇关于从服务器检索的图像，其存储在localStorage的，并显示它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！