è possibile leggere l'immagine dal server remoto usando in modalità binaria usando javascript o phonegap?

Question

In realtà in uno dei miei progetti ho bisogno di leggere le immagini dal server remoto e archiviarle nel database locale come binario da utilizzare in un'applicazione successiva. quindi c'è un modo semplice per farlo? è l'unica cosa in cui mi sono bloccato ed è importante completare l'applicazione. per favore aiuto !! Grazie in anticipo.

Answer 1

È piuttosto semplice nell'ambiente HTML5/ES5 (praticamente tutto tranne Internet Explorer 9-);

Per prima cosa è necessario scaricare il contenuto binario dell'immagine in un arraybuffer, quindi convertirlo in base64 datauri, che in realtà è una stringa. Questo può essere memorizzato nei browser localStorage, indexedDb o webSQL, o anche in un cookie (non troppo efficiente); In seguito è sufficiente impostare questo datauri come immagine src da visualizzare.

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

ho preso in prestito la routine di conversione Base64 da questo antico messaggio: http://jsperf.com/encoding-xhr-image-data/5