Question

我正在使用下面的函数来使用我从用户获取的html5画布对图像进行编码（这里我使用本地图像文件）

jsfunction

function imgToDataURL(img) {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var c = canvas.getContext('2d');
c.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}

无法加载其localimage 如何克服这个问题＆amp;还有其他方法可以将图像编码为base64

Answer 1

要使用canvas生成数据uris，您需要确保满足cross-origin resource sharing（CORS）要求。

从本地文件加载图像：//被认为是与页面不同的来源（或其效果）。如果您的图像无法加载，则需要确保图像的路径也正确。

在任何情况下，为了能够加载以后可以从canvas元素中提取的图像作为data-uri，您需要确保使用本地安装的服务器从同一来源加载图像，例如示例轻量级Mongoose或类似（LAMP / WAMP等）。

对于公共服务器同样适用，但在某些情况下，外部服务器可能允许使用跨源的图像。在这些情况下，您可以通过在设置crossOrigin之前将图片上的"anonymous"属性设置为src来请求此类用法。但这不适用于本地图像。

如何将图像转换为base64

1 个答案: