javascript - toDataURL() 小屏幕，保存的图像小

Question

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

我的挑战是我使用 .toDataURL() 将 Canvas 的全部内容保存为图像。但据我了解，这只能捕获 Canvas 的大小。在较小的设备(手机)上，保存的图像最终尺寸非常小。以下是我为获取 Canvas 上的内容所做的操作:

var image = document.getElementById("drawingCanvas").toDataURL("image/jpeg", 1.0);

image = image.replace('data:image/jpeg;base64,', '').replace('data:image/png;base64,', '');

是否有某种方法可以将我的 Canvas 设置为能够保存较大的图像，即使由于设备原因 Canvas 的尺寸非常小？

Answer 1

当然...

1. 保存用于创建客户绘图的命令。
2. 使用 document.createElement 创建更大的内存 Canvas 。
3. drawImage 将全尺寸图像绘制到 Canvas 上。
4. context.scale Canvas 。
5. 重新发出绘图命令。
6. 使用 .toDataURL 导出放大的 Canvas 。

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

...或者...

如果您愿意降低绘图级别以允许出现一些“锯齿”，则可以消除第 1 步。通过使用 CSS 将 Canvas 覆盖在客户端的 img 之上来实现此目的。这样，客户的绘图就已经在原始 Canvas 上被隔离了。那么你的程序就简化为:

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