toDataURL（）小屏幕，小保存图像

Question

我创建了一个使用HTML5画布元素的网络应用程序，允许用户绘制各种形状、颜色、线宽。他们也可以上传一张图片，把它画在画布上，然后在上面画画，作为注释他们的图片的一种方式。

我的挑战是我正在使用。toDataURL（）获取画布的全部内容，并将其保存为图像。但据我所知，这只能捕获画布的大小。在较小的设备（手机）上，保存的图像最终尺寸非常小。下面是我为获得画布上的内容所做的：

var image=文档。getElementById（“drawingCanvas”）。toDataURL（“图像/jpeg”，1.0）；

Image=image.replace（'data： Image/jpeg； Base64,', '').替换（'data： Image/png； Base64,', '');

是否有一些方法可以设置我的画布，以便能够保存较大的图像，即使由于设备原因，画布的大小非常小？

Answer 1

当然

1. 保存用于创建客户端图形的命令
2. 使用文档创建更大的内存画布。createElement
3. drawImage将全尺寸图像放到画布上
4. 上下文。缩放画布
5. 重新发出绘图命令
6. 使用导出放大的画布。toDataURL

多亏了上下文。缩放不必更改图形命令的任何坐标。

...或者。。。

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

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