Question

我正在寻找一种方法来使用JS将HTML文档的整个内容替换为单个图像，其源代码是 base64 字符串。

当您直接在浏览器中加载URL时，它会在显示时显示某些属性。例如，图像是纵横比例的，以适应，直到单击放大图像的图像，如果它大于窗口大小。

但是，如果我只是做一些像......

document.write('<img src="data:image/png;base64,..." />');

...图像会显示，但它不会展示那些＆＃34; native＆＃34;缺乏更好的术语。

有没有办法告诉浏览器用base64编码的图像替换所有内容？或者，或许，也许某种方式尽可能地模仿原生图像行为？

Answer 1

你不应该使用document.write。首先，它会导致您遇到的问题。其次，它缓慢且不安全。尽可能使用DOM：

// Store list of all child elements
var list = document.body.children;
// Loop through list
for (var i = 0; i < list.length; i++) {
    // Use native DOM method to remove child
    document.body.removeChild(list[i]);
}
// Use native DOM method to create an image element
var img = document.createChild('IMG');
// Set the src of that image to your string
img.src = 'base64string';
// Use native DOM method to append image to document body
document.body.appendChild(img);

使用Javascript替换所有html内容与base64图像

1 个答案: