通过 Ajax 的图像数据 - 如何在页面上显示图像

Question

我正在通过 AJAX 创建一个包含照片的 Domino 文档。 我能够在 Notes Domino 文档中将 Base64 图像数据返回到服务器。

数据存储在 Richtext（文本区域）字段中，因为

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAFA..........." - (this goes on for several lines)

我尝试使用

<<image id= "pic1" >>

表单的 onLoad 事件中的 passthru 标记在 Domino 网页上显示我尝试使用以下代码将数据推送到图像元素中：

//Photo Stuff
alert(document.forms[0].photo1.value);
document.getElementById("pic1").src = document.forms[0].photo1.value;

警报正在显示数据。 图片没有出现。

请帮忙。
谢谢
麦克风

Answer 1

我的印象是使用数据 URI 可以实现内嵌图像。

喜欢：

<img src="data:image/png;base64,
Your base 64 source. . . "/>

或

document.getElementById("pic1").src = 
   'data:image/png;base64,' + document.forms[0].photo1.value;

编辑：经过测试...这是一个 jsFiddle：

http://www.jsfiddle.net/UySAb /1/

Mozilla 的相关信息：https://developer.mozilla.org/en/The_data_URL_scheme

注意：Josiah 在他的评论中也是正确的，你的目标标签需要是 img，而不是 image。

Answer 2

您只需创建一个Image对象并将base64作为其src，包括data:image...部分像这样：

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

这就是他们所说的“数据 URI”，这里是 内心平静的兼容性表。