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

Question

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

我的挑战是我使用.toDataURL（）来将画布的全部内容保存为图像。但据我所知，这只能捕获画布的大小。在较小的设备（手机）上，保存的图像最终尺寸很小。这是我正在做的事情，以获得画布上的内容：

var image = document.getElementById（“drawingCanvas”）。toDataURL（“image / jpeg”，1.0）;

image = image.replace（'data：image / jpeg; base64，'，''）。renplace（'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导出放大的画布。