画布上的抗锯齿文本

Question

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

不幸的是，所有浏览器似乎都开启了抗锯齿功能——无论我尝试什么。 CSS 和 ctx.mozImageSmoothingEnabled=false; 似乎都不起作用。

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

Answer 1

当imageSmoothingEnabled 设置为false 时，画布将对所有绘制到它的所有内容进行抗锯齿处理，图像 除外（然后仅用于重采样目的）。

虽然有多种选择 -

SVG

使用 SVG 将是理想的，因为它是矢量并且可以很容易地转换为 postscript。如果打印机支持 postscript，它会将矢量光栅化为最佳光栅掩码并制作清晰的边缘。

大位图

您可以通过使用非常大的位图来减少抗锯齿的效果，但根据我自己的经验，也可能是您的经验，它不会消除灰点。

还有可能遇到画布元素本身的限制，在某些浏览器中限制为 6k。根据打印机的 DPI，这可能不够，也可能不够。

大位图和阈值（见下文）的组合也许可以解决这个问题。

Deep Dive 实施

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

这一切都不需要太多努力就可以实现：

• 要加载字体并获取路径数据，您可以使用 f.ex。 opentype.js
• 使用 Bresenham 或 EFLA 将矢量渲染成线条（如果需要）
• 使用多边形填充算法 even-odd 或 non-zero winding 来填充多边形（如果您可以用Bresenham/EFLA 线）。

由于您从事印刷行业，Open-Type 可能还不够，因为 Adob​​e 字体在典型存储库中更为常见。您可能可以通过其他方式获取路径数据，或者在 Open Type 版本甚至 SVG 字体类型中找到等价物。

阈值

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

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