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

Posted 2023-03-25

【中文标题】toDataURL() 小屏幕，小保存图片

【英文标题】：toDataURL() small screens, small saved image

【发布时间】：2016-03-24 11:42:42

【问题描述】：

我创建了一个 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,', '');

是否有某种方法可以设置我的画布以保存更大的图像，即使由于设备的原因，画布的尺寸非常小？

【参考方案1】：

当然……

保存用于创建客户绘图的命令。 使用document.createElement 创建更大的内存画布。 drawImage 画布上的全尺寸图像。 context.scale 画布。 重新发出绘图命令。 使用.toDataURL 导出放大的画布。

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

...或者...

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

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

【讨论】：

第一个解决方案听起来很有希望，但我不知道如何保存命令。不过，出于另一个原因，我也需要这样做。我将来会添加一个“撤消”按钮。如何保存命令？

Here's a previous SO Q&A 展示了如何将路径序列化为 javascript 对象，然后重绘路径。

好的，超级。对此，我真的非常感激。我会尝试这一切并报告。