Una historia sobre cómo mejorar mis tarjetas de Twitter
Comparto mis publicaciones de blog en Twitter, y hubo un tiempo en que me entretuve dibujando una imagen para cada publicación del blog.
Configure Hugo para que use una imagen nombrada banner.png
o banner.jpg
almacenada en la carpeta de publicaciones para ser utilizada como imagen de Open Graph, de esta manera:
meta property="og:image" content="https://flaviocopes.com/axios/banner.png" /
Si una publicación no tiene imagen, muestro mi avatar en su lugar:
meta property="og:image" content="https://flaviocopes.com/img/avatar.png" /
Hay un problema: dejé de crear esas imágenes de banner personalizadas hace mucho tiempo, y la mayoría de mis publicaciones no tienen un banner.
Todos parecen iguales en Twitter:
No hay forma de que pueda crear 500 imágenes de banner a mano. He tenido la idea de generarlas mediante programación desde que vi a Indie Hackers generando esas imágenes para las publicaciones de blogs de foros (una gran idea):
Entonces, después de encontrar una linda inspiración para una imagen de banner, decidí hacer un banner personalizado para cada una de las publicaciones de mi blog.
El banner es una imagen PNG y para mantener la publicación centrada en el tema (“cómo crear y guardar una imagen con Node.js y Canvas”) omitirá algunas partes.
Además, hay muchas maneras diferentes de hacer lo que yo hice, aquí hay sólo una.
En primer lugar, ¿qué paquetes npm necesitamos?
¡Solo uno canvas
!:
npm install canvas
Este paquete nos proporciona una implementación basada en Node.js de la API Canvas que conocemos y amamos en el navegador.
En otras palabras, todo lo que uso para generar imágenes también funciona en el navegador.
Excepto que en lugar de obtener una instancia de Canvas de un canvas
elemento HTML, cargue la biblioteca y obtenga la función createCanvas
de ella:
const { createCanvas } = require('canvas')
Luego llamo a esta función pasando el ancho y alto del lienzo, que establezco en 1200×600:
const width = 1200const height = 600const canvas = createCanvas(width, height)const context = canvas.getContext('2d')
Pintémoslo de negro (haciendo casualmente una referencia a los Rolling Stones):
context.fillStyle = '#fff'context.fillRect(0, 0, width, height)
Pasemos ahora a agregar texto.
Primero elijo la fuente Menlo, grande y en negrita. La alineo en el centro y luego establezco el color blanco.
Finalmente llamo context.fillText()
a dibujar el texto en el lienzo:
const text = 'Hello, World!'context.font = 'bold 70pt Menlo'context.textAlign = 'center'context.fillStyle = '#fff'context.fillText(text, 600, 170)
Dibujamos un cuadro azul detrás del texto:
const text = 'Hello, World!'context.textBaseline = 'top'context.fillStyle = '#3574d4'const textWidth = context.measureText(text).widthcontext.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)context.fillStyle = '#fff'context.fillText(text, 600, 170)
Establecemos la textBaseline
propiedad para top
facilitar la colocación del rectángulo. Luego, verifico qué tan largo es el texto con , measureText()
y lo dibujo utilizando las mismas coordenadas que usamos para dibujar el texto. Fotos Porno y actrices porno
Asegúrate de dibujar el rectángulo antes del texto, porque en Canvas dibujas las cosas una encima de otra, en orden:
¡Genial! Ahora quiero mostrar la URL de mi sitio web en la parte inferior:
context.fillStyle = '#fff'context.font = 'bold 30pt Menlo'context.fillText('flaviocopes.com', 600, 530)
Y también quiero agregar mi logo. Para ello, vamos a importar la loadImage
función desde el canvas
módulo:
const { createCanvas, loadImage } = require('canvas')
y lo llamamos especificando la logo.png
imagen contenida en la misma carpeta donde ejecutamos el script:
loadImage('./logo.png').then(image = { })
Una vez resuelta la promesa, tenemos el objeto de imagen y podemos dibujarlo en el lienzo usando drawImage()
:
loadImage('./logo.png').then(image = { context.drawImage(image, 340, 515, 70, 70)})
¡Eso es todo! Ahora podemos guardar la imagen en un image.png
archivo usando el toBuffer()
método:
const buffer = canvas.toBuffer('image/png')fs.writeFileSync('./image.png', buffer)
Aquí está el código completo:
const fs = require('fs')const { createCanvas, loadImage } = require('canvas')const width = 1200const height = 630const 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).widthcontext.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)})
Tips de Node.js
Tal vez te puede interesar:
- Cómo gestionar la carga de archivos en Node.js
- Cómo obtener los nombres de todos los archivos en una carpeta en Node
- Cómo renombrar archivos de forma masiva en Node.js
- Cómo comprobar la versión actual de Node.js en tiempo de ejecución
Cómo crear y guardar una imagen con Node.js y Canvas
Comparto mis publicaciones de blog en Twitter, y hubo un tiempo en que me entretuve dibujando una imagen para cada publicación del blog. Una historia sobre c�
programar
es
https://aprendeprogramando.es/static/images/programar-como-crear-y-guardar-una-imagen-con-node-2284-0.jpg
2024-10-17
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente