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上时，它不起作用，意味着在本地文件系统中它显示完整的基本64格式，如iVb .... 但是在iis上它将base64代码仅仅作为“基础”。那么为什么它不能在iis上工作我不知道，所以请帮助我并发送我的html文件，它也适用于iis。

Answer 1

我很确定你有Same Origin Policy问题。

在IIS上运行页面时，它在不同于本地的上下文中运行：而不是file:// URL，它在http://上运行。

您要做的是获取本地图像文件并将其加载到远程站点的画布中。出于安全原因，使用传统JavaScript是不可能的。（我不确定这是如何在本地工作的 - 根据我的理解，它不应该。但无论如何。）

您需要使用允许JavaScript直接访问本地文件的HTML 5 file API。我会看看我是否可以挖掘一些相关的SO问题。

更新：这应该会有所帮助：

How can I draw an image from the HTML5 File API on Canvas?

使用JavaScript将本地映像转换为base64

1 个答案: