canvas.drawImage .toDataURL

canvas.drawImage .toDataURL

本文关键字：toDataURL drawImage canvas      更新时间：2023-09-26

到目前为止，我有这段代码用于为图像添加一点水印并将其绘制到画布上，现在我正在尝试将该画布数据获取到 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');，但它没有返回

这是指向我的垃圾箱的链接

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

修复后，您将获得的下一个错误是：

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

映像必须存在于同一域中才能解决此问题。

您可能还必须预加载图像。

相关文章：