有可能从远程服务器使用二进制模式使用javascript或phonegap读取图像? [英] is possible to read image from remote server using in binary mode using javascript or phonegap?
问题描述
实际上,在我的一个项目中,我需要从远程服务器读取图像,并将其存储在本地数据库中作为二进制文件在以后使用。所以有什么简单的方法,我可以做到这一点?它是唯一的事情,我坚持,它是重要的完成应用程序。请帮忙 !!
在HTML5 / ES5环境(几乎除了Internet Explorer 9以外的所有东西) p>
首先,你需要将图像的二进制内容下载到arraybuffer中,然后将其转换为base64 datauri,这实际上是一个字符串。这可以存储在浏览器localStorage,indexedDb或webSQL,甚至一个cookie(不太高效);稍后您只需将此数据库设置为要显示的图像src。
< script&
function showImage(imgAddress){
var img = document.createElement(img);
document.body.appendChild(img);
getImageAsBase64(imgAddress,function(base64data){img.src = base64data;});
};
函数getImageAsBase64(imgAddress,onready){
//从在线或从任何字符串存储获取
var req = new XMLHttpRequest();
req.open(GET,imgAddress,true);
req.responseType ='arraybuffer'; //这将不能用于FF
中的同步请求req.onload = function(){onready(arrayBufferToDataUri(req.response)); };
req.send(null);
};
function arrayBufferToDataUri(arrayBuffer){
var base64 ='',
encodings ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 + /',
bytes = new Uint8Array(arrayBuffer),byteLength = bytes .byteLength,
byteRemainder = byteLength%3,mainLength = byteLength - byteRemainder,
a,b,c,d,chunk;
for(var i = 0; i chunk =(bytes [i] <16) (字节[i + 1] <8)| bytes [i + 2];
a =(chunk& 16515072)>> 18; b =(chunk& 258048)> 12;
c =(chunk& 4032)>> 6; d = chunk& 63;
base64 + =编码[a] +编码[b] +编码[c] +编码[d];
}
if(byteRemainder == 1){
chunk = bytes [mainLength];
a =(chunk& 252)> 2;
b =(chunk& 3)<< 4;
base64 + = encodings [a] + encodings [b] +'==';
} else if(byteRemainder == 2){
chunk =(bytes [mainLength] << 8) bytes [mainLength + 1];
a =(chunk& 16128)>> 8;
b =(chunk& 1008)>> 4;
c =(chunk& 15)<< 2;
base64 + =编码[a] +编码[b] +编码[c] +'=';
}
returndata:image / jpeg; base64,+ base64;
}
< / script>
我从这个细微的帖子借用了base64转换例程: http://jsperf.com/encoding-xhr-image-data/5
Actually in one of my project i need to read images from remote server and store in local database as binary to use in application later. so is there any simple way that i can do this? it's only thing in which i stuck and it is important to complete application. please help !! Thanks in advance.
It is rather straightforward in HTML5/ES5 environment (practically everything except Internet Explorer 9-);
First you need to download the binary content of the image into an arraybuffer, then convert it to base64 datauri, that is actually a string. This can be stored in the browsers localStorage, indexedDb or webSQL, or even a cookie (not too efficient though); Later on you just set this datauri as the image src to display.
<script>
function showImage(imgAddress) {
var img = document.createElement("img");
document.body.appendChild(img);
getImageAsBase64(imgAddress, function (base64data) { img.src = base64data; });
};
function getImageAsBase64(imgAddress, onready) {
//get from online or from whatever string store
var req = new XMLHttpRequest();
req.open("GET", imgAddress, true);
req.responseType = 'arraybuffer'; //this won't work with sync requests in FF
req.onload = function () { onready(arrayBufferToDataUri(req.response)); };
req.send(null);
};
function arrayBufferToDataUri(arrayBuffer) {
var base64 = '',
encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
bytes = new Uint8Array(arrayBuffer), byteLength = bytes.byteLength,
byteRemainder = byteLength % 3, mainLength = byteLength - byteRemainder,
a, b, c, d, chunk;
for (var i = 0; i < mainLength; i = i + 3) {
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
a = (chunk & 16515072) >> 18; b = (chunk & 258048) >> 12;
c = (chunk & 4032) >> 6; d = chunk & 63;
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}
if (byteRemainder == 1) {
chunk = bytes[mainLength];
a = (chunk & 252) >> 2;
b = (chunk & 3) << 4;
base64 += encodings[a] + encodings[b] + '==';
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
a = (chunk & 16128) >> 8;
b = (chunk & 1008) >> 4;
c = (chunk & 15) << 2;
base64 += encodings[a] + encodings[b] + encodings[c] + '=';
}
return "data:image/jpeg;base64," + base64;
}
</script>
I borrowed the base64 conversion routine from this fine post: http://jsperf.com/encoding-xhr-image-data/5
这篇关于有可能从远程服务器使用二进制模式使用javascript或phonegap读取图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!