画布上的抗锯齿文字

Question

我必须为许多用工业喷墨打印机打印的.png （儿童杂志背面的广告）创建.png 。

不幸的是，无论我如何尝试，所有浏览器似乎都启用了抗锯齿功能。 CSS和ctx.mozImageSmoothingEnabled=false;都不会ctx.mozImageSmoothingEnabled=false; 似乎有效。

有没有人有想法让文本显示在画布上而没有任何灰度像素试图使字体更清晰？

Answer 1

当imageSmoothingEnabled设置为false （然后仅用于重采样目的）时，除了图像外，画布将对所有绘制的对象进行imageSmoothingEnabled 。

虽然有多种选择-

SVG

使用SVG是理想的选择，因为它是向量，并且可以轻松转换为后记。 如果打印机支持附言，它将把矢量光栅化为最佳光栅掩模并形成清晰的边缘。

大位图

您可以通过使用非常大的位图来降低抗锯齿的效果，但是根据我自己的经验（可能还有您的经验），它无法消除灰点。

还存在满足canvas元素本身的限制的风险，在某些浏览器中，canvas元素的限制为6k。 根据打印机的DPI，这可能不够，也可能不够。

大型位图和阈值的组合（请参见下文）也许可以帮助您解决此问题。

深潜实施

解决此问题的另一种方法（但更高级）是手动加载字体并使用Bresenham或类似算法绘制字体路径。 另外一个方面是，您还需要使用多边形填充算法（即，奇偶或非零缠绕）。

所有这些都是可以实现的，而无需付出太多的努力：

• 要加载字体并获取路径数据，可以使用f.ex。 opentype.js
• 使用Bresenham或EFLA将矢量渲染到线条上（如果需要）
• 使用多边形填充算法使用偶数奇数或非零缠绕来填充多边形（如果可以用Bresenham / EFLA线覆盖边缘，则可以使用普通的画布填充）。

由于您在印刷行业，Open-Type可能不够用，因为典型库中的Adobe字体更为常见。 您可能可以通过其他方式获取路径数据，或者在Open Type版本甚至SVG字体类型中找到等效的路径数据。

阈

另一种方法是量化灰度级。 您可以遍历位图并使用阈值将像素设置为透明或纯色。

结果可能不尽如人意，因为您最终会在某些边缘周围出现一些尖锐的过渡。 但是，您可以根据打印分辨率以及所选的阈值来减少这些伪影。