從網址讀取圖片，並將其保存在html / phonegap中的base64中

Question

我正在嘗試讀取URL（其資源是圖像）並在base64中對該圖像進行編碼以將其保存在數據庫中。

我到處都是Google和Stackoverflow，很多人說保存從URL讀取的base64格式的圖像是不可能的（他們錯了嗎？）

我的步驟如下：

我解析一個XML文件，其中有圖像的URL。 我試圖將此圖像以base64格式保存在數據庫中。

有誰能夠幫助我？

Answer 1

我無法輕易將其示例放在一起，但是應該可以，假設圖像來自您正在運行代碼的同一域，或者您可以控制圖像的跨原點標頭（否則您可以會得到跨域錯誤）。

假設是這種情況，您可以。 這是我在其中編碼JSFiddle徽標的JSFiddle： http ://fiddle.jshell.net/5S6BY/（因為徽標與代碼運行所在的域位於同一域中，所以它可以工作）。

訣竅是將其繪制到畫布上，然后將該畫布轉換為base64。

這是代碼：

var url = "http://fiddle.jshell.net/img/logo.png";
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var image = new Image();
image.crossOrigin = 'anonymous';
image.addEventListener('load', function() {
    ctx.drawImage(image, 0, 0, image.width, image.height);
    document.body.innerHTML = canvas.toDataURL();
});
image.src = url;

非常簡單。 加載圖像，將圖像繪制到畫布上，然后調用canvas.toDataUrl()獲得base64編碼的版本，您可以使用該版本進行任何所需的操作。