javascript之使用 img.crossOrigin = "Anonymous"将图像绘制到 Canvas 不起作用

mengfanrong 阅读:1145 2023-11-05 18:46:41 评论:0

在客户端的独立 JS 应用程序中,我正在努力做到这一点,以便我可以在 Canvas 上调用 toDataURL(),我在 Canvas 上绘制了一些由 URL 指定的图像。即我可以在文本框中输入我想在 Canvas 上绘制的任何图像(托管在 imgur 上)的 url,单击“绘制”按钮,它就会在 Canvas 上绘制。最终用户应该能够将他们的最终渲染保存为单个图像,为此我正在使用 toDataURL()。

无论如何,在他们真正修复那个烦人的“操作不安全”错误之前(哎呀,你要告诉最终用户他们可以用自己的数据做什么,不能做什么?)我遵循了一个解决方法,说将图像添加到 DOM 并将其 crossOrigin 属性设置为“Anonmyous”,然后将其绘制到 Canvas 上。

这是我的代码的完整工作简化版本(但实际上会有更多功能):

<!DOCTYPE html5> 
<html> 
<head> 
<style> 
#canvas {border:10px solid green;background-color:black;} 
#imgbox {border:2px solid black;} 
</style> 
</head> 
<body> 
<canvas id="canvas" width=336 height=336></canvas> 
<br><br> 
<input size=60 id="imgbox"> 
<input type="submit" value="Draw" onclick=draw()> 
<script> 
function draw() { 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    var img = new Image(); 
    img.src = document.getElementById("imgbox").value; 
    img.crossOrigin = "Anonymous"; 
    context.drawImage(img, 40, 40); 
} 
</script> 
</body> 
</html> 

如果没有 img.crossOrigin = "Anonymous"; 行,我可以在文本框中输入 http://i.imgur.com/c2wRzfD.jpg 并单击画,它会工作。然而,一旦我添加了那条线,整个事情就崩溃了,它甚至根本不会被绘制到 Canvas 上。

我需要更改什么才能解决此问题?我真的需要能够为最终用户实现保存他们最终图像的功能,编写 html5 规范的人故意引入这个错误非常烦人。

请您参考如下方法:

您必须在 src 之前设置 CORS 请求 - 只需将行换成:

img.crossOrigin = "Anonymous"; 
img.src = document.getElementById("imgbox").value; 

您还需要为图像添加一个 onload 处理程序,因为加载是异步的:

img.onload = function() { 
    context.drawImage(this, 40, 40); 
    // call next step in your code here, f.ex: nextStep(); 
}; 
img.crossOrigin = "Anonymous"; 
img.src = document.getElementById("imgbox").value; 


标签:JavaScript
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们