Question

我已经尝试了几个小时，我尝试了所有可以在stackoverflow和其他网站上找到的解决方案，但没有成功。

最值得注意的是，每种解决方案都完全或至少明显地彼此不同。而wc3schools和类似的网站似乎没有任何默认的解决方法。

我有这个简单的HTML文档：

<body onload="draw();">

<canvas id="canvas1" width="500" height="500"></canvas>

</body>

这个js文件：

// JavaScript Document

function draw() {

    var canvas1 = document.getElementById('canvas1');

    if(canvas1.getContext) {
        var ctx = canvas1.getContext('2d');

        //Here's a lot of drawing that I've removed to make everything that's relevant more readable.

    }
}

所以这就是我正在使用的，正如你所看到的，我已经删除了画布上绘制的所有代码，因为不需要知道保存画布的代码（请告诉我它是否可以虽然是。）

我真的不在乎我正在保存的格式或我是如何做的（通过点击我必须实现的按钮/右键单击画布/其他解决方案），我只是想知道如何以最简单的方式做到这一点！

Answer 1

毕竟，我设法以一种非常简单的方式完成了这项工作。这个简单的代码就是让用户右键单击画布并保存它所需要的，就像使用任何其他图片一样。它不仅易于实现，而且我认为它是最理想的解决方案，因为它是我们通常在互联网上保存图片的方式。

var saveImage = canvas1.toDataURL("image/png").replace("image.png", "saveImage/octet-stream");
window.location.href = saveImage;

＆＃34; canvas1＆＃34;是我要保存的画布的名称，＆＃34; image / png＆＃34;与我的代码无关，但是我们用＆＃34; saveImage / octet-stream＆＃34;替换了一些默认名称，在这种情况下这是我的画布。

我无法详细解释这段代码的作用，但它确实有效！

有没有简单的方法来启用用户保存画布？

1 个答案: