Javascriptを使用してすべてのhtmlコンテンツをbase64画像に置き換えます。

Question

JSを使用して、HTML文書のコンテンツ全体を、base64文字列の1つの画像に置き換える方法を探しています。

ブラウザにURLを直接ロードすると、URLが表示されたときに特定のプロパティが表示されます。例えば、ウィンドウサイズより大きい場合、画像を拡大する画像をクリックするまで、画像は縦横比が調整されます。

しかし、私は単に何かのような...

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

をすれば、...画像が表示されますが、それはより良い用語の欠如のために、それらの「ネイティブ」な特性を示すことはありません。

ブラウザにコンテンツのすべてを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);