Как создать и сохранить изображение с помощью Node.js и Холст

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

Я настроил Hugo так, чтобы он использовал изображение с именем баннер.png или banner.jpg хранится в папке post для использования в качестве изображения открытого графика, например:

Если в посте нет изображения, то как мой аватар вместо:

Есть проблема: я давно перестал создавать эти пользовательские изображения баннеров, и в большинстве моих постов нет баннера.

В Твиттере они все выглядят одинаково:

Я никак не могу сделать около 500 изображений баннеров под рукой. У меня возникла мысль о программной генерации их с тех пор, как я увидел Инди-хакеров создание этих изображений для сообщений в блогах форума (отличная идея):

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

Баннер представляет собой изображение в формате PNG, и для того, чтобы сообщение было сосредоточено на теме (“как создать и сохранить изображение с Node.js и холст”) Я пропущу некоторые части.

Кроме того, есть много разных способов сделать то, что я сделал, вот только один способ.

Прежде всего, какие пакеты npm нам нужны?

Только один! холст :

npm install canvas

Этот пакет предоставляет нам Node.js основанная реализация API Canvas, которую мы знаем и любим в браузере.

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

За исключением того, что вместо получения экземпляра Canvas из HTML-элемента я загружаю библиотеку, извлекаю из нее функцию createCanvas :

const { createCanvas } = require('canvas')

Затем я вызываю эту функцию, передавая ширину и высоту холста, которые я установил равными 1200×600:

const width = 1200
const height = 600

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

Давайте покрасим его в черный цвет (небрежно бросив ссылку на Rolling Stones).:

context.fillStyle = '#fff'
context.fillRect(0, 0, width, height)

Давайте теперь перейдем к добавлению текста.

Сначала я выбираю шрифт Menlo, большой и жирный. Я выравниваю его по центру, затем устанавливаю белый цвет.

Наконец, я вызываю context.fillText() , чтобы нарисовать текст на холсте:

const text = 'Hello, World!'

context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.fillStyle = '#fff'
context.fillText(text, 600, 170)

Давайте нарисуем синюю рамку позади текста:

const text = 'Hello, World!'

context.textBaseline = 'top'
context.fillStyle = '#3574d4'
const textWidth = context.measureText(text).width
context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
context.fillStyle = '#fff'
context.fillText(text, 600, 170)

Мы установили свойство textBaseline равным top , чтобы упростить позиционирование прямоугольника. Затем я проверяю длину текста, используя measureText() , и рисую его, используя те же координаты, которые мы использовали для рисования текста.

Убедитесь, что вы нарисовали прямоугольник перед текстом, потому что на холсте вы рисуете вещи друг на друге по порядку:

Круто! Теперь я хочу показать URL-адрес своего веб-сайта внизу:

context.fillStyle = '#fff'
context.font = 'bold 30pt Menlo'
context.fillText('flaviocopes.com', 600, 530)

И я также хочу добавить свой логотип. Для этого давайте импортируем Изображение загрузки функция с холста модуль:

const { createCanvas, loadImage } = require('canvas')

и мы называем это указанием logo.png изображения, содержащегося в той же папке, где мы запускаем скрипт:

loadImage('./logo.png').then(image => {
  
})

Как только обещание будет выполнено, у нас будет объект изображения, и мы сможем нарисовать его на холсте с помощью drawImage() :

loadImage('./logo.png').then(image => {
  context.drawImage(image, 340, 515, 70, 70)
})

Вот и все! Теперь мы можем сохранить изображение в изображение.png файл с использованием метода toBuffer() :

const buffer = canvas.toBuffer('image/png')
fs.writeFileSync('./image.png', buffer)

Вот полный код:

const fs = require('fs')
const { createCanvas, loadImage } = require('canvas')

const width = 1200
const height = 630

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

context.fillStyle = '#000'
context.fillRect(0, 0, width, height)

context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.textBaseline = 'top'
context.fillStyle = '#3574d4'

const text = 'Hello, World!'

const textWidth = context.measureText(text).width
context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
context.fillStyle = '#fff'
context.fillText(text, 600, 170)

context.fillStyle = '#fff'
context.font = 'bold 30pt Menlo'
context.fillText('flaviocopes.com', 600, 530)

loadImage('./logo.png').then(image => {
  context.drawImage(image, 340, 515, 70, 70)
  const buffer = canvas.toBuffer('image/png')
  fs.writeFileSync('./test.png', buffer)
})

Оригинал: “https://flaviocopes.com/canvas-node-generate-image/”