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

Question

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

我的挑战是我正在使用 .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. 保存用于创建客户绘图的命令。
2. 使用document.createElement 创建更大的内存画布。
3. drawImage 画布上的全尺寸图像。
4. context.scale 画布。
5. 重新发出绘图命令。
6. 使用.toDataURL 导出放大的画布。

感谢context.scale，您不必更改绘图命令的任何坐标。

...或者...

如果您愿意将图纸降级以允许出现一些“锯齿状”，则可以取消第 1 步。通过使用 CSS 在客户端的 img 上覆盖画布来做到这一点。这样，客户的图纸就已经在原始画布上被隔离了。然后您的程序简化为：

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