图像on负载未被调用

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

在这里没有调用图像的on负载。但是，当我删除img.crossOrigin = 'anonymous'; on loaad时，请呼叫并浏览器抛出错误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);