Question

我正在尝试从外部URL读取图像作为数据URL。这是我的代码

var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();

img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    console.log(canvas.toDataURL("image/jpeg"));
    canvas = null;
};
img.crossOrigin = 'anonymous';
img.src = "http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg";

这里没有调用Image的onload。但当我删除img.crossOrigin = 'anonymous'; onload时，调用浏览器并抛出错误SecurityError: The operation is insecure. 此错误来自Mozilla。 Chrome给出错误 -

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

无法像在Linux机器上那样在IE上进行测试

我找不到代码还有什么问题。

Answer 1

您只能将canvas.toDataURL("image/jpeg")应用于项目中存在的文件。根据我的想法，您可以使用其他网站的远程图像将其转换为base64图像。一种解决方案是，保存来自您想要获取的图像的图像，然后将canvas.toDataURL()应用于该已保存的图像。

Answer 2

我改变了我的代码。现在我使用代码从服务器而不是Image url发送字节：

URL u = new URL(url);
InputStream is = u.openStream();
byte[] = IOUtils.toByteArray(is);

图像onload未被调用

2 个答案: