右键单击画布时另存为图像答案

【问题标题】：Save as image when right clicked on canvas右键单击画布时另存为图像
【发布时间】：2015-04-16 12:09:12
【问题描述】：

当drawImage() 用于在画布元素上绘制一些东西时，画布可以被视为图像吗？

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

这是我看到的右键菜单：

应该怎样做才能使“图像另存为”选项可用？

【问题讨论】：

这是默认的浏览器实现。您需要在画布上监听“右键单击”并显示您自己的上下文菜单，这将执行图像保存
@VigneswaranMarimuthu：谢谢。如何在画布上监听“右键单击”以显示自己的上下文菜单
Canvas 通常不会改变你的 DOM，所以不可能对 DOM 图像进行右键 clic，所以你必须自己编写代码。示例：davidwalsh.name/html5-context-menu（我不测试）
用画布中的base64作为源将图像标签覆盖在画布上不是更容易吗
@adeneo 谢谢。您说的是正确的，但是如何生成 base64 字符串？像这样？ var theIMG = document.getElementById("dawenCanvas"); var cv = theIMG.getContext("2d"); var image = cv.toDataURL(); image = image.replace('data:image/png;base64,', ''); ?如果它抛出像SecurityError: The operation is insecure 这样的安全错误怎么办？

标签： javascript jquery html canvas

【解决方案1】：

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

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

然后在每次抽奖结束后：

imageFoo.src = canvas.toDataURL();

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

【讨论】：

这个 .toDataURL(); 会抛出像 SecurityError: The operation is insecure 这样的安全错误吗？
@Beki：只有画布被污染了。
你提到“你会失去很多速度”这是否意味着它会在处理或类似的过程中消耗更多的内存？
@Beki 图像数据本身将在内存中存储两次（如果您的编程草率，则存储三次），但这可以忽略不计。这更多是关于当您尝试为画布设置动画时它会成为一个问题（正如我预测的那样，您会看到 fps 显着下降）
但是说真的，为什么你首先需要这样做呢？如果下载画布是应用程序的一个组成部分，那么下载按钮会更有意义。如果不是，那么那些希望能够做到这一点的用户可以只使用支持他们想要的功能的浏览器。

【解决方案2】：

“另存为图像..”是一些浏览器（包括 Chrome 和 Firefox）为了方便而在上下文菜单中包含的内容。无论如何，这不是一个标准。

您可以模拟右键单击并提供带有另存为选项的自定义上下文菜单，但是，请注意：

为此，您还需要支持 A 标记中的 download 属性。问题是例如IE，它没有在菜单中提供“另存为图像..”选项，也不支持download属性。

更好的选择可能是在完成时插入实际图像而不是画布或在画布顶部（取决于 Alpha 通道的使用方式）。如果内容是动态且不断更新的，并且对于从外部源加载的图像也存在 CORS 限制，这可能并不总是可行的。

结论：几乎没有人可以为此制定可靠的解决方法。它几乎是并且将是一个浏览器功能（并且选择支持哪个浏览器已经是该功能本身的情况，所以这里没有收获......）。

【讨论】：

【解决方案3】：

如果你想下载画布上的图片，你可以这样做：

<!doctype html>
<html lang="gb">
    <head>
    </head>
    <body>
        <canvas id="test"></canvas>
        <script>
            var canvas = document.getElementById('test');
            var ctx = canvas.getContext("2d");
            ctx.font = "30px Arial";
            ctx.fillText("Noel Rocks",10, 50);

            canvas.addEventListener("contextmenu", function(ev){
            ev.preventDefault();
            var image_png = canvas.toDataURL("image/png");

            var download = document.createElement('a');
            download.href = image_png;
            download.download = "canvas.png";

            var evObj = document.createEvent('MouseEvents');
            evObj.initEvent( "click", true, false );
            download.dispatchEvent(evObj)

            }, false);
        </script>
    </body>
</html>

基本上它会覆盖上下文菜单，将画布链接设置为 png，然后将点击事件发送到链接。我使用了Download 属性，该属性在任何版本的 IE 或 Safari 中都不可用，因此可能不适合一般用途。

【讨论】：