Как загрузить шрифты Google на стороне сервера node js - PullRequest
Новая
       21

Как загрузить шрифты Google на стороне сервера node js

0 голосов
/ 18 февраля 2020

Я использую node js и canvas для создания API, который пишет текст на определенном изображении. Я успешно создал маршрут, такой как -> /: sometext /: fontsize /: color /: position-x /: position-y, и отправляет изображение stati c с текстом указанного размера шрифта, цвета и положения на холсте.

Чего я не могу добиться, так это того, что я хочу отправить семейство шрифтов в маршрут и отобразить его на экране. Кроме того, нет ли другого способа, с помощью которого я могу загрузить хотя бы шрифты Google без необходимости загрузки файла .ttf.

Что я пробовал:

  1. GetGoogleFonts npm пакет (что было плохой идеей, поскольку он застрял при установке)
  2. WebFontLoader (выдает ошибку «Окно не определено»)

Шаги для воспроизведения

В настоящее время я использую файл ttf для загрузки шрифта 


router.get('/thumbnail/:name/:fontsize/:color/:posx/:posy', function (req, res, next) {
  let name = req.params.name;
  let fontsize = req.params.fontsize
  let positionx = req.params.posx 
  let positiony = req.params.posy
  let color = req.params.color

  let myimage = 'static/image1.jpg'

  const canvas = createCanvas(2000, 1000)
  const ctx = canvas.getContext('2d')
  var str = "hi "+name
  registerFont('AvenirNext.ttf', { family: 'Avenir Next' })
  loadImage(myimage).then((image) => {
  ctx.drawImage(image, 0 , 0, 2000, 1000);
  ctx.font = fontsize + "px Avenir Next"
  ctx.fillStyle = color
  ctx.fillText(str, positionx, positiony);

  const out = fs.createWriteStream(__dirname + '/test.jpeg')
  const stream = canvas.createJPEGStream()
  stream.pipe(res)
  out.on('finish', () =>  console.log('The JPEG file was created.'))

})
});

Ответы [ 2 ]

1 голос
/ 18 февраля 2020

Если вы не хотите размещать файлы ttf на своем собственном сервере, вы можете попробовать использовать Google Font Github repo . 

// missing imports
const http = require('http');
const fs = require('fs');

const fontFamily = req.params.fontfamily; // example: ArchivoNarrow

// download font from github
const file = fs.createWriteStream(fontFamily + '.ttf');
const request = http.get('https://github.com/google/fonts/blob/master/ofl/' + fontFamily.toLowerCase() + '/' + fontFamily + '-Regular.ttf?raw=true', function(response) {
  response.pipe(file);
});

registerFont(fontFamily + '.ttf', { family: fontFamily });

// delete font after the image is created
try {
  fs.unlinkSync(fontFamily + '.ttf');
} catch(err) {
  console.error(err);
}

Шрифт, который я использовал для этого примера: ArchivoNarrow

0 голосов
/ 18 февраля 2020

Из документов для registerFont

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

выделение не мое

Вы называете это после вы создали свой холст. 

// first register the font
registerFont('AvenirNext.ttf', { family: 'Avenir Next' });
// then create the canvas
const canvas = createCanvas(2000, 1000);
const ctx = canvas.getContext('2d');
var str = "hi " + name;

Но учтите, что при этом будет попытаться загрузить шрифт, который будет доступен на вашем сервере. Если вы хотите настроить таргетинг на шрифт на сервере : //fonts.googleapis.com, вам нужно будет передать полный URI в файл шрифта (не для. css).

Кроме того, вы должны заключить свою фамилию в кавычки ("), поскольку она содержит пробел: 

ctx.font = fontsize + 'px "Avenir Next"';
...