如何在html5，jquery，javascript中獲取圖像字節字符串（base64）？

Question

我在iPhone或Android中有一個圖像，我想通過jQuery AJAX將該文件流或字節字符串傳遞給Web服務以將文件存儲在服務器上。

因此，在HTML5中，我如何獲得圖像文件（jpg，gif等）字節字符串，以便我可以將其發佈到服務器？

Answer 1

您可以使用canvas.drawImage(image, 0, 0)將圖像複製到具有相同大小的畫布，然後使用畫布的.toDataURL('image/TYPE')方法檢索圖像的base64表示形式。 'TYPE'然後可以是jpg，gif或png

示例：確保當前頁面和圖像都位於相同的域，子域和協議上，否則會出現安全錯誤。還要確保畫布具有相同的寬度和高度作爲圖像

HTML

<img src="whatever.jpg" id="myimage" /> 
<canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas> 

的Javascript

var myImage = document.getElementById('myimage'); 
var myCanvas = document.getElementById('mycanvas'); 

var ctx = myCanvas.getContext('2d'); 

ctx.drawImage(myImage, 0, 0); 

var mydataURL=myCanvas.toDataURL('image/jpg'); 

Answer 2

要添加到代碼示例而不在格式以分離所述原始數據字符串的開頭...

Javascript：

var myImage = document.getElementById('myimage'); 
var myCanvas = document.getElementById('mycanvas'); 
var ctx = myCanvas.getContext('2d'); 
    ctx.drawImage(myImage, 0, 0); 

var myDataURL = myCanvas.toDataURL('image/png');// could also be 'image/jpg' format 

/* to remove the 'data:image/jpg;base64,' later from using the toDataURL() function (or PNG version data:image/png;base64,') and have only the raw base4 data string, split the result string from the ctx.drawImage() function at the comma and take the second half, and the remaining data will be in tact like so: */ 

var myBase64Data = myDataURL.split(',')[1];// removes everything up to and including first comma 

個人喜歡這一點，並發現它是更清潔&更快，使用）類似的indexOf和子