使用JavaScript將本地圖像轉換為base64

Question

我在html中做項目，僅javascript。 我有一個將圖像轉換為base64的函數，請參見下面的代碼。

function getBase64Image()
{
    p = document.getElementById("picField").value;
    img.setAttribute('src', p);
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    var r = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    base64 = r;
    alert(base64);
}

但是問題是當我部署網站時，這意味着當我將html文件放置在iis上時，它無法正常工作，這意味着在本地文件系統中，它顯示了完整的base 64格式，如iVb ....，但是在iis上卻顯示了base64代碼作為“基礎”。 所以我不知道為什么它不能在iis上工作，所以請幫助我並向我發送也可以在iis上工作的html文件。

Answer 1

我很確定您有一個同源政策問題。

當您在IIS上運行頁面時，它在本地運行的環境與本地環境不同：它不是file:// URL，而是運行在http://站點。

您試圖做的是獲取本地圖像文件，並將其加載到遠程站點上的畫布中。 出於安全原因，無法使用傳統的JavaScript。 （我不確定這在本地是如何工作的-據我所知，它不應該。但是無論如何。）

您將需要使用HTML 5文件API ，該API允許JavaScript直接訪問本地文件。 我將研究是否可以挖掘一些相關的SO問題。

更新：這應該有助於：

• 如何在Canvas上從HTML5 File API繪制圖像？