canvas.drawImage .toDataURL

Question

到目前為止，我已經有了這段代碼來為圖像添加一些水印並將其繪制到畫布上，現在我正嘗試將畫布數據獲取到DataURL，由於某種原因，它無法正常工作

誰能給我個個主意嗎？ 以及如何修復它並獲取其URI數據

這是我的代碼

JS

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');

var watermark = new Image();
watermark.src = "http://dummyimage.com/80x80/red/ffffff";

var img = new Image();
img.src = "http://dummyimage.com/500x700/303030/ffffff";

context.drawImage(img, 0, 0);
context.drawImage(watermark,0,0,50,50);

的HTML

<canvas width="500" height="700" id="canvas1"></canvas>

嘗試使用context.toDataURL('image/png'); ，但不會返回

這是我的垃圾箱的鏈接

Answer 1

toDataURL方法存在於畫布上，而不存在於上下文中。

修復后，您將收到的下一個錯誤是：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

該映像必須存在於同一域中才能解決。

您可能還必須預加載圖像。