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');，但它没有返回

Here's a link to my bin

Answer 1

toDataURL方法存在于画布上，而不是上下文。

修复后的下一个错误是：

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

图片必须存在于同一个域中才能解决问题。

您可能还需要预装图像。