問(wèn)題描述
在客戶端獨(dú)立的 JS 應(yīng)用程序中，我正在嘗試制作它，以便可以在畫(huà)布上調(diào)用 toDataURL()，在該畫(huà)布上我繪制了一些由 URL 指定的圖像.即，我可以在文本框中輸入要在畫(huà)布上繪制的任何圖像(托管在 imgur 上)的 URL，單擊繪制"按鈕，它將在畫(huà)布上繪制.最終用戶應(yīng)該能夠?qū)⑺麄兊淖罱K渲染保存為單個(gè)圖像，為此我使用 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().
無(wú)論如何，直到他們真正解決了那個(gè)煩人的操作不安全"錯(cuò)誤(天哪，你要告訴最終用戶他們可以用自己的數(shù)據(jù)做什么和不能做什么?)我遵循了一個(gè)變通方法，說(shuō)將圖像添加到 DOM 并將其 crossOrigin 屬性設(shè)置為Anonmyous"，然后將其繪制到畫(huà)布上.
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.
這是我的代碼的完整工作簡(jiǎn)化版本(但實(shí)際上會(huì)有更多功能):
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>
沒(méi)有 img.crossOrigin = "Anonymous"; 行，我可以在文本框中輸入 http://i.imgur.com/c2wRzfD.jpg 并點(diǎn)擊畫(huà)，它會(huì)工作.但是，一旦我添加了那條線，整個(gè)東西就壞了，甚至根本不會(huì)被繪制到畫(huà)布上.
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.
我需要改變什么來(lái)解決這個(gè)問(wèn)題?我真的需要能夠?yàn)樽罱K用戶實(shí)現(xiàn)保存最終圖像的功能，而編寫(xiě) html5 規(guī)范的人故意引入了這個(gè) 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 之前設(shè)置 CORS 請(qǐng)求 - 只需將這些行換成:
You must set the CORS request before the src - just swap the lines into:
img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;
您還需要為圖像添加一個(gè) onload 處理程序，因?yàn)榧虞d是異步的:
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;
這篇關(guān)于使用 img.crossOrigin = "Anonymous" 將圖像繪制到畫(huà)布上不工作的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！