JS: ¿cómo codificar una imagen.png en el código base64 para incrustar URI de datos?

Tengo varios mapas de bits .png de diferentes dimensiones, por ejemplo ./img/dog.png y ./img/cat.png . ¿Cómo cargar la cadena base64 de mis imágenes a través de JS? Mis datos esperados son algo así (pero mucho más largo):

  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAfQCAYAAACaOMR5AAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAicCwy83crEe3e04AAAAABJRU5ErkJggg== 

Nota: deseo recuperar esta cadena que es mi archivo y solo mi archivo, no recortado, ni más grande. Luego lo incrustaré en un elemento SVG como:

   

Mi proyecto final se verá así 🙂

introduzca la descripción de la imagen aquí

Vea también: https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html , donde puede descargar el SVG, pero el png actualmente es solo un enlace y no se descargará.

2 Solutions collect form web for “JS: ¿cómo codificar una imagen.png en el código base64 para incrustar URI de datos?”

DE ACUERDO. La solución está en este violín y se explica a continuación.

0) Objetivo: Deseo anexar algo como:

  // formula " // shortened example 

1) Imágenes PNG a base 64.

Los PNG se almacenan como BLOB , también conocido como “una colección de datos binarios almacenados como una sola entidad”. Así que necesito un convertidor de BLOB a Base64:

 var converterEngine = function (input) { // fn BLOB => Binary => Base64 ? var uInt8Array = new Uint8Array(input), i = uInt8Array.length; var biStr = []; //new Array(i); while (i--) { biStr[i] = String.fromCharCode(uInt8Array[i]); } var base64 = window.btoa(biStr.join('')); return base64; }; 

2) Cargar el archivo y convertir (datos)

 var getImageBase64 = function (url, callback) { // to comment better var xhr = new XMLHttpRequest(url), img64; xhr.open('GET', url, true); // url is the url of a PNG/JPG image. xhr.responseType = 'arraybuffer'; xhr.callback = callback; xhr.onload = function(){ img64 = converterEngine(this.response); // convert BLOB to base64 this.callback(null,img64) // callback : err, data }; xhr.onerror = function(){ callback('B64 ERROR', null); }; xhr.send(); }; // make it looks like other D3js requests d3.uri = function(url, callback) { return getImageBase64(url, callback); }; 

3) Ejecutar el conjunto:

Ejecuto la función con la callback para agregar un elemento de imagen con los datos URI base64.

 d3.uri('http://fiddle.jshell.net/img/logo.png', function(data){ $("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM } ) 

Fuentes: Recibí ayuda de Obtención de datos BLOB de una solicitud XHR , y luego hice una demostración allí .

Lado del servidor

Puede que realmente termine usando la conversión del lado del servidor (fonts esto y esto ). Las formas posibles son:

 echo -n `cat file.png` | base64 > output.txt openssl base64 < path/to/file.png | tr -d '\n' > output.txt cat path/to/file.png | openssl base64 | tr -d '\n' > output.txt openssl base64 -in input.png -out output.txt 

Puede cargar texto de un archivo en un objeto JavaScript con XMLHttpRequest si lo desea. Luego, puede asignar el valor al atributo xlink: href para el elemento de imagen con setAttribute. Pero la respuesta a esta pregunta es probablemente lo que quieres.

¿Admite SVG la incrustación de imágenes de bitmap?

  • Obtener el #id de la URL actual
  • URIError: ¿secuencia de URI mal formada?
  • Cualquier forma de detectar el esquema de URI está disponible en Windows usando JavaScript en IE
  • URI de Skype Empresarial en lugar de Skype
  • Decodificar la image de código QR de Camera Roll React Native
  • Eliminar un argumento de consulta de una URL en javascript
  • Obtiene la ruta y la cadena de consulta desde la URL usando JavaScript
  • Generación de files portátiles en el lado del cliente HTML: sin resources externos ni llamadas al server
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.