toDataURL()小屏幕，小保存图像

Question

我已经创建了一个使用HTML5画布元素的web应用程序，允许用户绘制各种形状、颜色和线宽。他们还可以上传图像，将其绘制到画布上，然后在上面绘制，作为注释图像的一种方式。

我的挑战是使用.toDataURL()将画布的全部内容保存为图像。据我所知，这只能捕获画布的大小。在较小的设备(手机)上，保存的图像最终会变得非常小。下面是我正在做的事情，以获取画布上的内容：

var image = document.getElementById("drawingCanvas").toDataURL("image/jpeg"，1.0)；

image = image.replace('data:image/jpeg;base64，'，'').replace('data:image/png;base64，'，'')；

有没有办法设置我的画布能够保存较大的图像，即使画布的尺寸很小，由于设备的原因？

Answer 1

确定...

1. 保存用于创建客户端图形的命令。使用canvas.
2. context.scale document.createElement.
3. drawImage canvas.
4. Re-issue commands.
5. Export .toDataURL.

• 放大的画布创建更大的内存画布全尺寸图像

多亏了context.scale，你不必更改绘图命令的任何坐标。

...and alternatively...

如果您愿意将绘图降级以允许一些“锯齿”，则可以消除step#1。通过使用CSS将画布覆盖在客户端的img之上来实现这一点。这样，客户的绘图就已经隔离在原始画布上了。然后，您的过程将简化为：

1. 使用document.createElement创建更大的内存画布。确保较大的画布具有与原始canvas.
2. drawImage相同的纵横比，将全尺寸图像转换为canvas.
3. drawImage，将原始较小的画布转换为较大的画布。可以使用扩展版本的drawImage同时缩放客户端的图形：context.drawImage(originalCanvas, 0, 0, originalCanvas.width, originalCanvas.height, 0, 0, largerCanvas.width, largerCanvas.height)。是的，drawImage的图像源可以是另一个画布。；-)
4. 使用.toDataURL.

导出放大的画布