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.

镜像必须存在于相同的域中才能修复该问题。

您可能还需要预先加载图像。