问题描述
这应该是很简单的,但与它搏斗了几个小时后,我仍然无法得到它的工作。到目前为止,我所有的尝试都导致了图像成为损坏或截断中,根据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:
< IMG ID =documentHolderALT =图像视图占位符SRC =/>
然而,在每一个尝试,火狐显示:
图像损坏或截断:数据:为image / jpeg; base64,77 + 977 + 977 + 977 + 9A< ...更长串GT;
的网址:指向一个有效的JPEG图像,以及base64Image.length和错误信息表明,VAR / localStorage的实际包含的内容似乎是Base64的EN codeD数据
任何想法?
的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)的
< PHP
如果(使用isset($ _ GET ['LoadImg'])){
标题(内容类型:图像/ PNG);
$文件=的file_get_contents($ _ GET ['LoadImg']);
回声base64_en code($文件);
}
?>
阅读可以帮助你:
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?
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:
PS: maybe your Base64
is wrong?
这篇关于从服务器检索的图像,其存储在localStorage的,并显示它的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!