使用 img.crossOrigin = "Anonymous" 將圖像繪制到畫布上不起作用

Question

在客戶端的獨立 JS 應用程序中，我正在努力做到這一點，以便我可以在畫布上調用 toDataURL()，我在畫布上繪制了一些由 URL 指定的圖像。 即我可以在文本框中輸入我想在畫布上繪制的任何圖像（托管在 imgur 上）的 url，單擊“繪制”按鈕，它就會在畫布上繪制。 最終用戶應該能夠將他們的最終渲染保存為單個圖像，為此我正在使用 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輸入文本框並單擊繪制，它會起作用。 然而，一旦我添加了那條線，整個事情就崩潰了，它甚至根本不會被繪制到畫布上。

我需要更改什么才能解決此問題？ 我真的需要能夠為最終用戶實現保存他們最終圖像的功能，編寫 html5 規范的人故意引入這個錯誤非常煩人。

Answer 1

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

Answer 2

當服務器需要授權訪問映像時，值應為：

img.crossOrigin = "Use-Credentials";

否則瀏覽器將在收到HTTP 401后放棄。

Answer 3

如果您的圖像在將跨源設置為匿名后消失，則意味着您的服務器不允許跨源。 如果您使用 amazon s3 來提供圖像，則需要啟用對存儲桶的公共訪問，然后添加跨源策略（從模板）。 之后添加跨源“匿名”應該可以工作。

使用 img.crossOrigin = "Anonymous" 將圖像繪制到畫布上不起作用

問題描述

3 個解決方案

解決方案1
38 已采納

解決方案2
2 2014-12-23 14:54:43

解決方案3
0 2022-12-10 06:46:22

使用 img.crossOrigin = "Anonymous" 將圖像繪制到畫布上不起作用

問題描述

3 個解決方案

解決方案1 38 已采納

解決方案2 2 2014-12-23 14:54:43

解決方案3 0 2022-12-10 06:46:22

解決方案1
38 已采納

解決方案2
2 2014-12-23 14:54:43

解決方案3
0 2022-12-10 06:46:22