html 使用img.crossOrigin =“匿名”将图像绘制到画布不起作用

nkkqxpd9 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(224)

在一个客户端独立JS应用程序中，我尝试使它可以调用toDataURL（）在画布上绘制了一些由URL指定的图像。例如，我可以在文本框中输入任何图像的URL（主持人，比如说，imgur）我想在画布上画，点击一个“draw”按钮，它将在画布上绘制。最终用户应该能够保存他们的最终渲染为一个单一的图像，为此我使用toDataURL（）。
无论如何，直到他们真正修复了那个恼人的“操作不安全”错误（哎呀，你要告诉最终用户他们可以和不能对自己的数据做什么？），我遵循了一个变通方案，即将图像添加到DOM，并将其crossOrigin属性设置为“Anonmyous”，然后将其绘制到画布上。
下面是我的代码的一个完整的工作简化版本（但实际上会有更多的功能）：

<!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，然后单击draw，它就可以工作了，但是当我添加了这行，整个事情就中断了，它甚至根本不会被绘制到画布上。
我需要修改什么来修复这个问题？我真的需要能够实现最终用户保存他们最终图像的功能，编写html5规范的人故意引入这个bug是非常烦人的。

Html

来源：https://stackoverflow.com/questions/23123237/drawing-images-to-canvas-with-img-crossorigin-anonymous-doesnt-work

3条答案

按热度按时间

fivyi3re1#

您必须在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;

赞(0）回复(0）举报 2022-12-16

3df52oht2#

当服务器需要授权才能访问映像时，该值应为：