問題描述
在客戶端獨立的 JS 應用程序中，我正在嘗試制作它，以便可以在畫布上調用 toDataURL()，在該畫布上我繪制了一些由 URL 指定的圖像.即，我可以在文本框中輸入要在畫布上繪制的任何圖像(托管在 imgur 上)的 URL，單擊繪制"按鈕，它將在畫布上繪制.最終用戶應該能夠將他們的最終渲染保存為單個圖像，為此我使用 toDataURL().
In a client-side standalone JS application, I'm trying to make it so I can call toDataURL() on a canvas on which I've drawn some images specified by a URL. Ie I can input into a textbox the url to any image (hosted on, say, imgur) that I want to draw on the canvas, click a "draw" button and it will draw on the canvas. The end user should be able to save their final render as a single image, for this I'm using toDataURL().
無論如何，直到他們真正解決了那個煩人的操作不安全"錯誤(天哪，你要告訴最終用戶他們可以用自己的數據做什么和不能做什么?)我遵循了一個變通方法，說將圖像添加到 DOM 并將其 crossOrigin 屬性設置為Anonmyous"，然后將其繪制到畫布上.
Anyway, until they actually fix that annoying "operation is insecure" error (gee, you're going to tell the end user what they can and can't do with their own data?) I followed a workaround that said to add the image to the DOM and set its crossOrigin property to "Anonmyous" and then draw it to the canvas.
這是我的代碼的完整工作簡化版本(但實際上會有更多功能):
Here's a full working simplified version of my code (but in reality there will be many more features):
<!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 并點擊畫，它會工作.但是，一旦我添加了那條線，整個東西就壞了，甚至根本不會被繪制到畫布上.
Without the img.crossOrigin = "Anonymous"; line, I could input http://i.imgur.com/c2wRzfD.jpg into the textbox and click draw and it would work. However as soon as I added that line, the whole thing broke and it won't even be drawn to the canvas at all.
我需要改變什么來解決這個問題?我真的需要能夠為最終用戶實現保存最終圖像的功能，而編寫 html5 規范的人故意引入了這個 bug，這非常煩人.
What do I need to change to fix this? I really need to be able to implement the functionality for the end user to save their final image and it's extremely annoying that the people who wrote the html5 spec purposely introduced this bug.
推薦答案
您必須在 src 之前設置 CORS 請求 - 只需將這些行換成:
You must set the CORS request before the src - just swap the lines into:
img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;
您還需要為圖像添加一個 onload 處理程序，因為加載是異步的:
You will also need to add an onload handler to the image as loading is asynchronous:
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;
這篇關于使用 img.crossOrigin = "Anonymous" 將圖像繪制到畫布上不工作的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！