如何從html圖像獲取base64編碼的數據

我有一個註冊表單，用戶可以選擇一個化身。他們有兩個可能性：如何從html圖像獲取base64編碼的數據

選擇一個默認的頭像
上傳自己的頭像

在我的HTML頁面，我有這個。

<img id="preview" src="img/default_1.png">

它顯示選定的頭像。我使用File Api讓用戶上傳他們自己的圖像。這使得HTML圖像的src就像這樣。

<img id="preview" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... />

當他們張貼登記表。數據將被髮送到REST服務。當用戶自己上傳頭像時，我可以發送base64編碼數據。但是，我如何處理默認的頭像？它是一個url而不是base64編碼的數據。

來源

2013-04-02 janseeuw

只需將默認的頭像轉換爲Base64圖像 –

好的，謝謝爲評論。 – janseeuw

在這裏，我正在玩jsFiddle，從畫布上的標記中加載img，並在做.toDataURL（）。 – MichD

你可以試試下面的示例 http://jsfiddle.net/xKJB8/3/

<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG"> 
<canvas id="myCanvas" />

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("preview"); 
ctx.drawImage(img, 10, 10); 
alert(c.toDataURL());

來源

2013-04-02 10:09:13

不錯的代碼！還有一個問題。將base64輸出始終假定爲PNG數據（Canvas實例是否'轉換'圖像數據？），如果有，是否有辦法識別圖像的真實數據類型（幻數？）並更改生成的base64協議宣言？ –

我（勉強）接受我們需要創建一個畫布元素來生成編碼，但是我的首選是在js中生成它，而不必使用佔位符來拋棄視圖代碼（我的用例需要幾張圖片） - 像這樣的類似答案：http://stackoverflow.com/a/22172860/1177832 – danwild

如果src是一個svg圖像怎麼辦 –

您還可以使用的FileReader類：

var reader = new FileReader(); 
    reader.onload = function (e) { 
     var data = this.result; 
    } 
    reader.readAsDataURL(file);

來源

2014-01-06 00:31:14 httpete

但是，然後，該文件將需要在blob格式：/ – yashas123

如何從html圖像獲取base64編碼的數據

回答

相關問題