javascript - 右键单击 Canvas 时另存为图像

Question

当 drawImage() 用于在 Canvas 元素上绘制内容时， Canvas 可以被视为图像吗？

当我右键单击绘制的 Canvas 元素时，它会显示“将图像另存为”选项。

这是我看到的右键菜单:

要使“图像另存为”选项可用，应该怎么做？

Answer 1

所以，这在很大程度上取决于浏览器及其工作方式，一般来说我不建议搞乱它，但是如果你有出于某种原因让它工作，那么一种方式:您可以“简单地”将 Canvas 转换为 <img>每次绘制后显示元素并显示 <img>元素代替。

var canvas = document.getElementById('exampleCanvas'); //Hidden <canvas> element
var imageFoo = document.getElementById('exampleImg'); //Visible <img> element

然后在每次抽奖结束后:

imageFoo.src = canvas.toDataURL();

这里的缺点是你会失去很多速度，所以不要将它用于动画 Canvas 或类似的东西。