Сглаживание текста на холсте

Question

Мне нужно создать .png s для большого количества клиентов, которые печатаются на промышленных струйных принтерах (объявления на задних частях детских журналов).

К сожалению, все браузеры, похоже, используют сглаживание - независимо от того, что я пробовал. Кажется, что не работает ни CSS, ни ctx.mozImageSmoothingEnabled=false;.

Есть ли у кого-нибудь идеи, чтобы текст отображался на холсте БЕЗ серого масштабирования, пытаясь сделать шрифт более острым?

Answer 1

Полотно будет анти-алиас все нарисованное на него, за исключением изображений когда imageSmoothingEnabled установлен в false (а затем только для передискретизации целей).

Есть различные варианты, хотя -

SVG

Использование SVG было бы идеально, как это векторы и могут быть легко преобразованы в постскриптуме. Если принтер поддерживает постскриптум, он растеризует векторы в оптимальную растровую маску и создает острые края.

Большой растровый

Вы можете уменьшить эффект сглаживания с помощью очень большого растрового изображения, но из моего собственного опыта, и, возможно, ваша, как хорошо, это не исключает серые точки.

Существует также риск соблюдения ограничения самого элемента холста, который в некоторых браузерах ограничен 6k. В зависимости от DPI принтера это может быть или не быть достаточно.

Комбинация большого растрового изображения и порога (см. Ниже), возможно, поможет вам в этом.

Глубокое погружение реализация

Другой способ, но более продвинутые, чтобы обойти это, чтобы загрузить шрифт вручную и сделать пути его, используя Bresenham или подобный алгоритм. Дополнительный аспект заключается в том, что вам также нужно будет использовать алгоритмы заполнения полигонов (т. Е. Четная или не нулевая обмотка).

Все это выполнимо без особых усилий:

• Для загрузки шрифтов и получить данные пути вы можете использовать f.ex. opentype.js
• Использование Bresenham или EFLA для визуализации векторов для линий (при необходимости)
• Используйте алгоритм заполнения полигона even-odd или non-zero winding для заполнения многоугольников (вы можете уйти с нормальным холстом заполните, если вы можете покрыть края линиями Bresenham/EFLA).

Как и в индустрии печати, Open-Type может быть недостаточным, поскольку шрифты Adobe чаще встречаются в типичном репозитории. Вероятно, вы можете получить данные о пути другими способами или найти эквивалент в версии открытого типа или даже в виде шрифта SVG.

Порог

Другой подход заключается в квантовать серо-уровней. Вы можете выполнить итерацию по растровому изображению и использовать пороговое значение, чтобы установить пиксель прозрачным или сплошным цветом.

Результат может быть не таким хорошим, поскольку в конечном итоге вы получите некоторые резкие переходы вокруг некоторых краев. Однако вы можете уменьшить эти артефакты в зависимости от разрешения печати, а также выбранного порогового значения.