有可能从远程服务器使用二进制模式使用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屋！