使用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绘制图像？