Question

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

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

这是我看到的右键菜单：

enter image description here

如何使用“将图像另存为”选项？

Answer 1

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

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

然后在每次抽奖结束后：

imageFoo.src = canvas.toDataURL();

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

Answer 2

为方便起见，“保存为图像...”是某些浏览器（包括Chrome和Firefox）在上下文菜单中包含的内容。但它不是任何标准。

你可以模仿右键单击并提供自定义上下文菜单，并选择另存为，但是，这里有一点需要注意：

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

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

总结：很少有人可以为此做出可靠的解决方法。它几乎是一个浏览器功能（并且选择支持哪个浏览器已经是功能本身的情况，所以这里没有增益......）。

Answer 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，然后将click事件发送到链接。我使用了Download属性，这在任何版本的IE或Safari中都不可用，因此可能不适合一般用途。

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

3 个答案: