使用Javascript代替base64圖像的所有html內容

我正在尋找一種方法來使用JS來替換單個圖像的HTML文檔的全部內容，其源代碼是base64字符串。使用Javascript代替base64圖像的所有html內容

當您直接在瀏覽器中加載URL時，它在顯示時會顯示某些屬性。例如，圖像被縱橫比縮放以適合，直到單擊放大它的圖像，如果它大於窗口大小。

但是，如果我只是做這樣的事情......

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

...圖像將顯示，但不會表現出那些「原生」的特點，由於缺乏一個更好的詞。

有沒有辦法告訴瀏覽器用base64編碼的圖像替換它的所有內容？或者，或者，也許某種方式儘可能地模仿原生圖像行爲？

來源

2016-12-03 William Thomas

最簡單的方法是將瀏覽器重定向到數據url。你放棄了對內容的任何控制，而不同的瀏覽器有不同的限制。如果我是你，我會尋找一個現有的JS庫，做類似的事情。 – lonesomeday

指向我的應用程序的數據url的問題是，大圖像具有大量的base64字符串，而這實際上往往會降低瀏覽器的速度。 –

您不應該使用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);

來源

2016-12-03 00:28:49

不幸的是，這也沒有奏效。它仍然表現出我在Chrome上看到的行爲，即比瀏覽器窗口更大的圖片不會自動縮小，也不會有本地圖片網址所具有的「點擊放大/縮小」功能。 –

我誤解了你正在做的事情，這是不可能的，因爲你所指的功能是你瀏覽器的功能，而不是JavaScript或DOM的功能。正如@lonesomeday上面所說的，像'window.location.href ='data：image/png; base64 ...'這樣的東西會做你想做的事情。但是，現在您將失去對頁面的任何腳本控制。 –

使用Javascript代替base64圖像的所有html內容

回答

相關問題