Node realizes text generation and image code sharing-JS Tutorial-php.cn

Node realizes text generation and image code sharing

小云云

Release： 2018-01-20 14:25:59

Original

2794 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:

It became almost like this:

#The ruby guy on the backend made a html to convert the image, and said that it can be transferred It was too slow, so I took over this trap

So I messed around for a while before going to bed and came up with a simple implementation

Solution ideas

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

Related wheels

images Node.js lightweight cross-platform image editor 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 Chinese font support, 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 to share it to give everyone a reference.

Related recommendations:

php native image synthesis and text generation image

Discuss how to convert text with HTML content in PHP Generate images

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

The above is the detailed content of Node realizes text generation and image code sharing. For more information, please follow other related articles on the PHP Chinese website!