Der Knoten verarbeitet Text, um Bilder zu erzeugen

Dieses Mal bringe ich Ihnen Bilder zur Knotenoperationstextgenerierung, was sind die Vorsichtsmaßnahmen für die Knotenoperationstextgenerierungsbilder

, das Folgende ist ein praktischer Fall, Werfen wir einen Blick darauf.

Lösungsideen

Text in SVG konvertieren -> SVG in PNG -> Bilder zusammenführen

Verwandte Räder

1. Bilder Node.js Eine leichte, plattformübergreifende Bildkodierungs- und -dekodierungsbibliothek, die keine zusätzlichen Installationen

   Abhängigkeiten erfordert

2. Text-zu-SVG-Text in SVG

3. svg2png SVG zu PNG-Bild

Beispielcode

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

Notizen

Text-to-SVG benötigt die Unterstützung chinesischer Schriftarten, sonst werden die chinesischen Schriftarten verstümmelt.

Es hat nur mehr als 500 Millisekunden gedauert, es einmal auf meinem kaputten Computer auszuführen. Ich hoffe, es reicht aus Es soll jedem eine Referenz geben.                                        

Ich glaube, Sie beherrschen die Methode zum Lesen dieses Artikels. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Anwendung regulärer Ausdrücke in JS

Typ und Typbeurteilung in JS (mit Code)

Wie erkennt JS Skripte im Browser

Das obige ist der detaillierte Inhalt vonDer Knoten verarbeitet Text, um Bilder zu erzeugen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!