javascriptまたはphonegapを使用してバイナリモードでリモートサーバからイメージを読み取ることはできますか？

Question

実際に私のプロジェクトの1つでは、リモートサーバーからイメージを読み込んで、アプリケーションで後で使用するためにバイナリとしてローカルデータベースに格納する必要があります。私はこれを行うことができる簡単な方法はありますか？それは私が立ち往生し、アプリケーションを完了することが重要です唯一のものです。助けてください ！！前もって感謝します。

Answer 1

HTML5/ES5環境（実際にはInternet Explorer 9以外のすべて）ではかなり簡単です。

まず、イメージのバイナリコンテンツをarraybufferにダウンロードしてから、実際には文字列であるbase64 datauriに変換する必要があります。これは、ブラウザのlocalStorage、indexedDbまたはwebSQL、またはCookie（あまり効率的ではありません）に格納することができます。後で、このdatauriを表示するイメージsrcに設定するだけです。

<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 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/', 
      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> 

私はこの素晴らしいポストからのbase64変換ルーチンを借り：[DBに保存されたdiv要素内の画像を表示する方法]のhttp://jsperf.com/encoding-xhr-image-data/5