można odczytać obraz ze zdalnego serwera przy użyciu trybu binarnego przy użyciu javascript lub phonegap?

Question

Właściwie w jednym z moich projektów muszę odczytać obrazy ze zdalnego serwera i przechowywać w lokalnej bazie danych jako plik binarny do późniejszego użycia w aplikacji. więc czy istnieje jakiś prosty sposób, aby to zrobić? to jedyna rzecz, w której utknąłem i ważne jest, aby ukończyć aplikację. proszę pomóż !! Z góry dziękuję.

Answer 1

Jest to dość proste w środowisku HTML5/ES5 (praktycznie wszystko oprócz Internet Explorera 9-);

Najpierw należy pobrać binarną zawartość obrazu do arraybuffera, a następnie przekonwertować na bazę danych base64, która jest w rzeczywistości łańcuchem znaków. Może to być przechowywane w przeglądarkach localStorage, indexedDb lub webSQL, a nawet w pliku cookie (nie jest to jednak zbyt wydajne); Później ustawiasz te datauri jako obraz src do wyświetlenia.

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

pożyczyłem procedurę konwersji base64 od tego znakomitego postu: http://jsperf.com/encoding-xhr-image-data/5