Tengo una imagen codificada en base64. Si lo pongo a la derecha en HTML funciona:¿Cómo mostrar la imagen codificada en base64 en HTML si está ubicada en un archivo separado?
<img src="data:image/png;base64,..."/>
Pero cuando pongo todo ese contenido base 64 en un archivo separado, no es así:
<img src="image.base64.txt"/>
He intentado cambiar la extensión a .png, pero no ayuda. ¿Algunas ideas?
No puedes hacer eso, creo. La primera sintaxis corresponde a un pseudo protocolo (esquema) data: que significa que los datos no se deben buscar desde afuera, sino desde la cadena del atributo en sí. Como los "datos" son en general binarios, y el atributo es texto, base64 se usa comúnmente.
Pero cuando los datos se obtienen desde fuera de la página (servidor http o sistema de archivos local), los datos deben venir en formato raw (binario).
Podría hacerlo con un poco de trabajo de javascript, por supuesto.
Debería enviar los encabezados HTTP Content-type, Content-encoding y charset correctos junto con el archivo. Tenga en cuenta que todos son parte de los datos: esquema de URI también. Usted realmente debe tener una cláusula charset=utf-8 o similar entre el tipo de contenido y la codificación:
url(data:image/png;charset=utf-8;base64,...);
hice algo similar para mi proyecto final del año en la universidad, yo estaba usando de documento XML para enlazar a una página y mostrar la imágenes en un elemento de lona. Lo hice para que la imagen fue registrada para una variable, a continuación, asigna la variable con la base 64 de imagen codificada de este modo:
xmlDoc=loadXMLDoc("test.xml");
x=xmlDoc.getElementsByTagName("image");
txt=x[1].childNodes[0].nodeValue;
document.write(txt);
var card1 = txt;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src= card1;
Usted puede simplemente tomar el enfoque del lado del servidor y sólo imprimir el archivo en la parte src de la img etiqueta de este modo:
<img src="<?php echo file_get_contents('some/path/image.txt');?>"
Donde su image.txt contiene es decir: data:image/png;base64,...
es muy probable que una pregunta muy tonta, pero se supone que funciona así? No puedo encontrar ningún borrador o RFC en relación con el análisis de datos de base64 en recursos externos, aunque mis habilidades de Google a veces se pueden comparar con la capacidad de recitación de pi de un camello. Además, el objetivo de los URI de datos como fuente de imagen (u objeto, o lo que sea) es reducir el número de conexiones a los recursos externos GET; ¿Cuál sería el propósito de incluir datos de base64 en recursos externos? (no tratando de jugar el inteligente, simplemente pregunta :)) – methode
@methode No sé si se supone que funciona o no, eso es lo que estoy tratando de averiguar :) – serg
¡Oh, así que es por eso que preguntaste! :) Me sorprendería mucho si funcionara, pero como yo tampoco lo sé, +1 – methode