javascript - 更改 HTML5 中 canvas 元素的 DPI

Question

我正在创建一个 Chrome 应用程序，允许用户使用 canvas 元素设计一些不同的东西。完成后，我想使用蒙版裁剪掉指定区域之外的所有内容，然后将图像发送到打印机。但是，我需要能够精确控制打印尺寸。

当我用 python 制作类似的应用程序时，将 DPI 设置为分辨率与我需要的尺寸的比率是一个简单的问题。我正在尝试寻找是否有一种像 HTML5 一样简单的解决方案。

我发现了几个帖子询问类似的事情，但没有得到答复，而且没有太多事件。

如有任何帮助，我们将不胜感激!

Answer 1

Canvas 是一种位图(光栅)格式。您不能只增加 DPI 而不出现一些可怕的伪像。

但是，您可以记录所有绘图、描边/填充等，然后在打印时创建更大的 Canvas 进行打印，并放大所有绘图命令以适应更高分辨率的 Canvas 。只要您不使用位图图像或直接像素操作，结果就会很好。尽管大 Canvas 格式在某些设备和浏览器上可能会出现问题。更好的方法是将其全部转换为矢量格式(如 SVG)并打印。或者完全跳过 Canvas 并绘制到 SVG。