图像 onload 没有被调用

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";

此处未调用图像的 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

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

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

图像 onload 没有被调用

Image onload is not getting called

javascript

cross-domain