Node implements text generation pictures-JS Tutorial-php.cn

Node implements text generation pictures

小云云

Release： 2018-01-02 10:47:48

Original

4130 people have browsed it

This article mainly introduces the sample code for converting node text to images. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Today the boss made a request to generate an invitation card on the server. Well... To put it simply, you need this one:

It became almost like this:

The ruby guy on the backend made a html to convert the image, saying that the transfer was too slow. , I just took this pitfall

So I messed around for a while before going to bed and made a simple implementation

Solution ideas

Convert text to svg -> svg to png -> Merge images

Related wheels

##images Node.js lightweight cross-platform image encoding and decoding library, No need to install additional dependencies
text-to-svg text to svg
svg2png svg to png image

Sample code

&#39;use strict&#39;;

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

Promise.promisifyAll(fs);

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

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

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

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

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

Promise.coroutine(function* generateInvitationCard() {
 const targetImg1Path = &#39;./i/1.png&#39;;
 const targetImg2Path = &#39;./i/2.png&#39;;
 const targetImg3Path = &#39;./i/3.png&#39;;
 const targetImg4Path = &#39;./i/qrcode.jpg&#39;;
 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(&#39;./i/card.png&#39;, { quality : 90 });
})().catch(e => console.error(e));

Copy after login

Notes

text-to-svg requires the support of Chinese fonts, otherwise the Chinese will be garbled

It only took more than 500 milliseconds to execute it once on my broken computer. I feel it is enough. I hope I can give you a reference by sharing it.

Related recommendations:

php native image synthesis and text generation image

Share examples of using captchapng to generate image verification codes in Nodejs

php generation Picture thumbnail function

The above is the detailed content of Node implements text generation pictures. For more information, please follow other related articles on the PHP Chinese website!