Der Knoten realisiert die Textgenerierung und die gemeinsame Nutzung von Bildcode

In diesem Artikel wird hauptsächlich der Beispielcode zum Konvertieren von Knotentext in Bilder vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Heute hat mich mein Chef gebeten, eine Einladungskarte auf dem Server zu erstellen. Um es einfach auszudrücken, ich brauche nur diese:

wurde in etwa so:

Der Typ, der Ruby im Backend macht, hat einen HTML-Code erstellt um das Bild zu konvertieren, und sagte, dass es zu langsam sei, also habe ich diese Falle angenommen

Also habe ich vor dem Schlafengehen ein bisschen herumgespielt und mir eine einfache Implementierung ausgedacht

Lösungsideen

Text zu SVG -> SVG zu PNG -> Bilder zusammenführen

Bilder Node.js leichte plattformübergreifende Bildbearbeitung Dekodierungsbibliothek, keine Notwendigkeit, zusätzliche Abhängigkeiten zu installieren
Text-zu-SVG-Text zu SVG
svg2png SVG in PNG-Bild
Beispielcode

Notizen

'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));

Text- to-svg erfordert Unterstützung für chinesische Schriftarten, sonst werden die chinesischen Schriftarten verstümmelt.

Es hat nur mehr als 500 Millisekunden gedauert, bis es auf meinem kaputten Computer ausgeführt wurde. Ich hoffe, es reicht aus Es soll jedem eine Referenz geben.

Verwandte Empfehlungen:

PHP-native Bildsynthese und Bild zur Textgenerierung

Besprechen Sie, wie Sie Text mit HTML-Inhalt in PHP konvertieren und Bilder generieren

Teilen Sie Beispiele für die Verwendung von captchapng zum Generieren von Bildverifizierungscodes in Nodejs

Das obige ist der detaillierte Inhalt vonDer Knoten realisiert die Textgenerierung und die gemeinsame Nutzung von Bildcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!