Реагируйте с узлом canvas: registerFont reasonTypeError: Object (...) не является функцией - PullRequest
Новая
       52

Реагируйте с узлом canvas: registerFont reasonTypeError: Object (...) не является функцией

0 голосов
/ 27 апреля 2020

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

Точнее говоря, моя игра построена на React on. js, и она работает локально, используя только системные шрифты. Но мне также нужно, чтобы он работал с рендерингом на стороне сервера, а на сервере системные шрифты не установлены. Это означает, что это dr aws изображение и текст с небольшими квадратами, где текст должен быть.

Моя проблема связана с registerFont в пакете canvas. Соответствующая часть моего кода: 

import { registerFont, createCanvas } from 'canvas';
//import RobotoR from '../../public/Roboto/Roboto-Regular.ttf';

export const drawCanvas = ({ sentence, cards, workingCards, width, height }) => {
  // default canvas size
  let cw = 1200 // canvas width
  let ch = 630 // canvas height; this is a minimun, it might change

  ~~~

  registerFont('../../public/Roboto/Roboto-Regular.ttf', { family: 'Roboto' })
  const canvas = createCanvas(cw, ch)
  const ctx = canvas.getContext('2d')

Вызов createCanvas работает, а вызов registerFont - нет. Я посмотрел в node_modules / canvas и registerFont экспортируется немного по-другому, но, похоже, работает буквально для всех остальных.

node_modules / canvas / index. js: 

function createCanvas (width, height, type) {
  return new Canvas(width, height, type)
}

~


/**
 * Resolve paths for registerFont. Must be called *before* creating a Canvas
 * instance.
 * @param src {string} Path to font file.
 * @param fontFace {{family: string, weight?: string, style?: string}} Object
 * specifying font information. `weight` and `style` default to `"normal"`.
 */
function registerFont (src, fontFace) {
  // TODO this doesn't need to be on Canvas; it should just be a static method
  // of `bindings`.
  return Canvas._registerFont(fs.realpathSync(src), fontFace)
}

~

module.exports = {
  Canvas,
  ...
  registerFont,
  ...
  createCanvas,
  ...

Возможно, я совершаю небольшую глупую ошибку, но не могу ее найти. Помощь

1 Ответ

0 голосов
/ 28 апреля 2020

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

В пакете node-canvas. json есть строка "browser": "browser. js" ', которая указывает экспортировать ограниченный набор функций при запуске в browser.

Моя функция рисования используется в браузере и в отдельном процессе API на стороне сервера. Но мне не нужно регистрировать шрифты в браузере, так как они уже установлены, поэтому я импортирую «registerFont», а затем проверяю, возвращается ли он неопределенным. Если он определен, я использую его, если нет, я должен быть в браузере и не нужен.

...