Как отобразить изображение в кодировке base64 в HTML, если оно находится в отдельном файле?

Question

У меня есть base64 кодированное изображение. Если я положу это прямо в HTML, он работает:

<img src="data:image/png;base64,..."/>

Но когда я помещаю все содержимое base64 в отдельный файл, это не так:

<img src="image.base64.txt"/>

Я пытался изменить расширение на .png, но это не помогло. Есть идеи?

Answer 1

Вам необходимо отправить правильные заголовки HTTP Content-type, Content-encoding и charset вместе с файлом. Обратите внимание, что все они являются частью данных: схема URI также. Вы действительно должны иметь charset=utf-8 или подобное предложение между типом контента и кодировкой:

url(data:image/png;charset=utf-8;base64,...);

Answer 2

Вы можете просто воспользоваться подходом на стороне сервера и просто распечатать файл в src части тега img следующим образом:

<img src="<?php echo file_get_contents('some/path/image.txt');?>"

Где ваш image.txt содержит, например: data:image/png;base64,...

Answer 3

Я сделал нечто подобное для моего последнего года обучения в университете, я использовал документы XML для ссылки на страницу и показа изображений в элементе canvas.Я сделал так, чтобы в изображении был произведен поиск переменной, а затем присвоил переменную с кодированным изображением base 64 следующим образом:

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;

Answer 4

Вы не можете этого сделать, я верю.Первый синтаксис соответствует псевдопротоколу (схеме) data: , что означает, что данные должны извлекаться не извне, а из самой строки атрибута.Поскольку «данные» в общем случае являются двоичными, а атрибут - текстовым, обычно используется base64.

Но когда данные извлекаются извне страницы (http-сервер или локальная файловая система), данные должны поступатьв необработанном (двоичном) виде.

Конечно, вы можете сделать это с помощью некоторой работы с JavaScript.