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

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

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

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

image=image.replace（'data:image/jpeg；base64'，''）。replace（'data:image/png；base64'，''）

---

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

当然……

保存用于创建客户端图形的命令

使用

document.createElement

创建一个更大的内存画布

drawImage

将全尺寸图像放到画布上

context.缩放画布

重新发出绘图命令

使用

.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

导出放大的画布

---

当然……

保存用于创建客户端图形的命令

使用

document.createElement

创建一个更大的内存画布

drawImage

将全尺寸图像放到画布上

context.缩放画布

重新发出绘图命令

使用

.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

导出放大的画布

---

第一个解决方案听起来很有希望，但我不知道如何保存命令。不过，出于另一个原因，我需要这样做。我将在将来添加一个“撤消”按钮。如何保存命令？这显示了如何将路径序列化为javascript对象，然后重新绘制路径。好的，超级。我真的很感激。我将对此进行尝试并报告。第一种解决方案听起来很有希望，但我不知道如何保存命令。不过，出于另一个原因，我需要这样做。我将在将来添加一个“撤消”按钮。如何保存命令？这显示了如何将路径序列化为javascript对象，然后重新绘制路径。好的，超级。我真的很感激。我会尝试一下，然后再报告。