小编Zal*_*beg的帖子

我试图了解如何使用img标记的crossorigin属性.我找不到一个好的例子(我发现的关于CORS启用的图像用JavaScript代码解释,因此我看不到img标签的crossorigin属性.

我猜错了,如果我理解错了,请纠正我的错误.

首先,可以编写下面的代码片段来绘制图像到画布:

<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" src="http://...." alt="" width="400" height="400">
<script>
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = document.getElementById("image").value;
    context.drawImage(img, 40, 40);
}
</script>

下面的代码是否等同于上面的代码？它不包含"img.crossOrigin",但在img标记中具有crossorigin属性.

<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" crossorigin="anonymous"src="http://...." alt="" width="400" height="400">
<script>
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = document.getElementById("image").value;
    context.drawImage(img, 40, 40);
}
</script>

说实话,我无法进行实验,因为我不知道哪个站点允许将其图像用作CORS. …