如何從網站獲取所有圖像並將其替換爲base64編碼？

-1

如何從特定網站獲取所有圖像並將其替換爲base64編碼？服務器端解決方案將工作。喜歡：如何從網站獲取所有圖像並將其替換爲base64編碼？

var img = document.querySelectorAll("img"); 
for (var i = 0; i < img.length; i++) { 
    //replace with base64 encoding 
}

爲什麼：我想創建一個基於RSS提要電子書（牧高笛）。我已經將內容轉換爲HTML，但圖像需要在本地顯示。替換圖像base64看起來像是最好的解決方案。

來源

2012-05-30 David Knaack

你能更精確嗎？什麼阻止你簡單地做到這一點？你爲什麼要那樣做？內聯資源？ –

[你有什麼試過？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） –

你爲什麼要這麼做？或者你認爲一個serverside（非javascript！）解決方案？ – Bergi

事情是這樣的：

的jQuery +帆布：

$("img").load(function(i) { 
    var $this = $(this), 
     jCanvas = $("<canvas width='" + $this.width() + "' height='" + $this.height() + "'/>"), 
     oCanvas = jCanvas[0]; 

    oCanvas.getContext("2d").drawImage(this, 0, 0); 

    this.src = oCanvas.toDataURL(); 
});

但如果圖像是作爲該腳本的同一個域這隻會工作。

演示：http://jsfiddle.net/K5RY3/3/

來源

2012-05-30 16:44:14 andlrc

首先—，我不知道這特別適用於您的情況—記得data URI是supported通過IE ≤ 7和IE 8沒有的支持是不穩定的;並且可以有many disadvantages使用data URI。

這就是說，有兩個地方值得擔心：<img>標籤和CSS文件。

我發現this tool將用其data URI表示替換樣式表中的所有圖像引用。

我在HTML頁面中看到<img>，但it wouldn't be hard to build something that does what you need沒有看到任何內容。

或者—和考慮的base64編碼所有的圖像都將由33％—臃腫的文件大小，你可以使用HTML5 app cache，這是專爲運行HTML網頁離線和works的一切，但IE 9 ≤（這是方法我會用）

只是manifest屬性添加到<html>元素：

<html manifest="files.appcache"> 
    ... 
</html>

files.appcache是一個簡單的文本文件：

CACHE MANIFEST 
http://www.example.com/index.html 
http://www.example.com/header.png 
http://www.example.com/blah/blah

該MDN article about app caches有更深入的信息。

來源

2012-05-31 14:38:45 josh3736

如何從網站獲取所有圖像並將其替換爲base64編碼？

回答

相關問題