Текст FabricJS против NodeJs Текст Novas Canvas - шрифты выглядят иначе

Question

Я очень удивлен этим, я создал целый дизайнер с Fabricjs, прошел через несколько правильных переходов с текстом, чтобы он работал так, как нужно. Проблема теперь в том, что когда данные из холста отправляются на сервер для рендеринга с полным разрешением с NodeJs (fabricjs в узле), шрифты выглядят иначе, чем в браузере.

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

Вот версия браузера:

А вот версия узла js:

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

Есть ли решение, о котором кто-нибудь знает, чтобы это исправить?

Answer 1

Я не верю, что существует какой-либо способ решить эту проблему при использовании fabric.js

Текст в fabric.js можно произвольно масштабировать, но затем он растеризуется и отображается как объект типа canvasлюбое другое изображение.

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

Зная, что это так, как fabric.js обрабатывает текст, можно выбрать две шкалы, которые дают совершенно разные результаты:

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

Вот почему рендеринг объектов fabric.js в вашем браузере с меньшим разрешением, чем на сервере, приводит к тому, что шрифт выглядит немного иначе.

Если вы попытаетесь отобразить версию браузера в том же размере, что и сервер, вы, вероятно, получите те же результаты.