es posible leer la imagen del servidor remoto usando en modo binario usando javascript o phonegap?

Question

En realidad, en uno de mis proyectos, necesito leer imágenes del servidor remoto y almacenarlas en la base de datos local como binario para utilizarlas en una aplicación posterior. Entonces, ¿hay alguna manera simple de que pueda hacer esto? es solo una cosa en la que me quedé y es importante completar la aplicación. por favor ayuda !! Gracias por adelantado.

Answer 1

Es bastante sencillo en el entorno HTML5/ES5 (prácticamente todo excepto Internet Explorer 9-);

Primero debe descargar el contenido binario de la imagen en un arraybuffer, y luego convertirlo a base64 datauri, que en realidad es una cadena. Esto se puede almacenar en los navegadores localStorage, indexedDb o webSQL, o incluso en una cookie (aunque no muy eficiente); Más tarde, acaba de establecer este datauri como la imagen src para mostrar.

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

Tomé prestado la rutina de conversión de base 64 de este poste de la bella: http://jsperf.com/encoding-xhr-image-data/5