JavaScript序列化圖像（圖標）

我正在CrossRider中構建擴展。我需要將圖像/圖標（我有他們的網址）保存在數據庫中。它們是微小的圖像，不會成爲數據庫中的問題。我可能有類似的東西接觸到background.js：JavaScript序列化圖像（圖標）

<img src="http://something.com/icon.ico" alt="icon">

而且我希望能夠到該圖像序列化到數據庫（它是一個key/value數據庫）和反序列化後，並顯示它。類似於HTML5的FileReader.readAsDataUrl()將會很好，但我不能使用該方法，因爲它似乎與表單綁定太多。

謝謝（[ - |）。

來源

2013-12-19 MadeOfAir

Base64編碼轉換爲顯示圖像似乎沒有必要：

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://g.etfv.co/http://www.google.com', true); 
xhr.responseType = 'blob'; 
xhr.onload = function (e) { 
    var icon_blob = xhr.response; //That can be saved to db 
    var fr = new FileReader(); 
    fr.onload = function(e) { 
     document.getElementById('myicon').src = fr.result; //Display saved icon 
    }; 
    fr.readAsDataURL(icon_blob); 
}; 
xhr.send(null);

這是它在JSFiddle。

來源

2013-12-21 22:02:40 MadeOfAir

一種解決方案可能是在畫布上繪製圖像，然後使用.toDataURL()。一個例子見How to get image bytes string (base64) in html5, jquery, javascript?。

您也可以通過AJAX獲取二進制數據。較新的瀏覽器可以使用XMLHttpRequest來檢索ArrayBuffer（本質上是一個字節數組）。有關更多信息，請參閱MDN: Sending and Receiving Binary Data。正如該文章所述，通過在AJAX請求上設置.overrideMimeType('text\/plain; charset=x-user-defined')也可以接收二進制數據。後一種技術適用於舊版瀏覽器和jQuery的AJAX功能。但是，任何類型的AJAX都需要繞過同源策略（例如，通過創建後端Web服務來獲取/代理映像並添加HTTP標頭Access-Control-Allow-Origin: *）。

二進制AJAX例如：http://jsfiddle.net/te7L4/

來源

2013-12-19 23:34:35 user113215

嗯，我認爲這兩個選項，但沒有一個似乎適合，因爲圖像駐留在不同的域。第一種解決方案失敗，出現安全警告，第二種解決方案由於「相同的原產地策略」而不起作用。請有更多想法嗎？ – MadeOfAir

@MadeOfAir您可以構建後端服務來獲取/代理圖標嗎？如果您發送HTTP標頭'Access-Control-Allow-Origin：*'與響應，您可以獲得相同的源策略（[跨源資源共享]（https://developer.mozilla.org/en-US /文檔/ HTTP/Access_control_CORS））。如果這些圖標是favicon，那麼http://g.etfv.co/就有一個現有的服務，它就是這樣做的。 – user113215

好吧，我越來越近了。但是我不知道使用'$ .get（「http://g.etfv.co/http://www.google.com」，函數（數據））這樣的請求獲取的數據類型。 ..）;'。我已經嘗試了幾次轉換，假設數據是二進制的，將其轉換爲十六進制字符串，然後使用'hexToBase64（）'指定[這裏]（http://stackoverflow.com/a/14918390/1433559），前面加上「data：image/x-icon; base64「，但沒有奏效。 – MadeOfAir

JavaScript序列化圖像（圖標）

回答

相關問題