javascript - 更改 HTML5 中 canvas 元素的 DPI

标签 javascript html image canvas dpi

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

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

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

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

最佳答案

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

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

关于javascript - 更改 HTML5 中 canvas 元素的 DPI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33876685/

相关文章:

python - 如何将图像添加到 QGraphicsScene 以便矩形项目可以位于其上?

android - 在 ListView 中下载图像

javascript - 选择第二个元素子javascript

html - 如何在不弄乱对齐方式的情况下减小我的 Twitter-bootstrap 站点中的 fontawesome 字形图标的大小?

javascript - 在 jquery 一页滚动中添加和删除类

javascript - 上传后是否可以删除iframe

javascript - 使用按钮/jquery 更改表的 css 样式

javascript - 在函数中保留变量

javascript - 想要使用 jquery 布局 ui 停靠和取消停靠应用程序部分

javascript - 获取图像中用户点击的部分