Node implémente des images de génération de texte

Cet article présente principalement l'exemple de code pour convertir le texte d'un nœud en images. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Aujourd'hui, le patron a demandé qu'une carte d'invitation soit générée sur le serveur. Bon... Pour faire simple, j'ai besoin de celle-ci :

Cela ressemble presque à ceci :

Le gars de Ruby sur le backend a créé un code HTML pour convertir l'image et a dit le transfert était trop lent. , j'ai pris ce piège

Alors j'ai déconné un peu avant de me coucher et j'ai trouvé une mise en œuvre simple

Idées de solutions

Texte en svg -> svg en png -> Fusionner les images

Roues associées

1. images Image multiplateforme légère Node.js bibliothèque d'encodage et de décodage, pas besoin d'installer des dépendances supplémentaires

2. texte en SVG en SVG

3. svg2png SVG en image PNG

Exemple de code

'use strict';

const fs = require('fs');
const images = require('images');
const TextToSVG = require('text-to-svg');
const svg2png = require("svg2png");
const Promise = require('bluebird');

Promise.promisifyAll(fs);

const textToSVG = TextToSVG.loadSync('fonts/文泉驿微米黑.ttf');

const sourceImg = images('./i/webwxgetmsgimg.jpg');
const sWidth = sourceImg.width();
const sHeight = sourceImg.height();

const svg1 = textToSVG.getSVG('魏长青-人人讲App', {
 x: 0,
 y: 0,
 fontSize: 24,
 anchor: 'top',
});

const svg2 = textToSVG.getSVG('邀请您参加', {
 x: 0,
 y: 0,
 fontSize: 16,
 anchor: 'top',
});

const svg3 = textToSVG.getSVG('人人讲课程', {
 x: 0,
 y: 0,
 fontSize: 32,
 anchor: 'top',
});

Promise.coroutine(function* generateInvitationCard() {
 const targetImg1Path = './i/1.png';
 const targetImg2Path = './i/2.png';
 const targetImg3Path = './i/3.png';
 const targetImg4Path = './i/qrcode.jpg';
 const [buffer1, buffer2, buffer3] = yield Promise.all([
  svg2png(svg1),
  svg2png(svg2),
 svg2png(svg3),
 ]);

 yield Promise.all([
  fs.writeFileAsync(targetImg1Path, buffer1),
  fs.writeFileAsync(targetImg2Path, buffer2),
  fs.writeFileAsync(targetImg3Path, buffer3),
 ]);

 const target1Img = images(targetImg1Path);
 const t1Width = target1Img.width();
 const t1Height = target1Img.height();
 const offsetX1 = (sWidth - t1Width) / 2;
 const offsetY1 = 200;

 const target2Img = images(targetImg2Path);
 const t2Width = target2Img.width();
 const t2Height = target2Img.height();
 const offsetX2 = (sWidth - t2Width) / 2;
 const offsetY2 = 240;

 const target3Img = images(targetImg3Path);
 const t3Width = target3Img.width();
 const t3Height = target3Img.height();
 const offsetX3 = (sWidth - t3Width) / 2;
 const offsetY3 = 270;

 const target4Img = images(targetImg4Path);
 const t4Width = target4Img.width();
 const t4Height = target4Img.height();
 const offsetX4 = (sWidth - t4Width) / 2;
 const offsetY4 = 400;

 images(sourceImg)
 .draw(target1Img, offsetX1, offsetY1)
 .draw(target2Img, offsetX2, offsetY2)
 .draw(target3Img, offsetX3, offsetY3)
 .draw(target4Img, offsetX4, offsetY4)
 .save('./i/card.png', { quality : 90 });
})().catch(e => console.error(e));

Notes

text-to-svg nécessite la prise en charge des polices chinoises, sinon les chinois sera tronqué

Il n'a fallu que plus de 500 millisecondes pour s'exécuter une fois sur mon ordinateur cassé. Je pense que c'est suffisant, je le partage dans l'espoir qu'il puisse donner à tout le monde une référence

<.>
Recommandations associées :

Synthèse d'image native PHP et génération de texte image

Partagez des exemples d'utilisation de captchapng pour générer des codes de vérification d'image dans Nodejs

PHP génère la fonction de vignette d'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!