Node text sample code for generating images, node text sample code

Node text sample code for generating images, node text sample code

Today, the boss raised his need to generate an invitation card on the server ..., To put it simply, we need this:

The difference is as follows:

The back-end ruby buddy made an html conversion image and said the conversion was too slow. I just put it down.

So before going to bed, I went down and made a simple implementation.

Solution

Convert text to svg-> convert svg to png-> merge Images

Related wheels

1. Images Node. js lightweight cross-platform image codec library without additional installation Dependencies
2. Convert text-to-svg text to svg
3. Svg2png svg to png Image

Sample 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/wenquanyi micron black. ttf'); const sourceImg = images ('. /I/webwxgetmsgimg.jpg '); const sWidth = sourceImg. width (); const sHeight = sourceImg. height (); const svg1 = textToSVG. getSVG ('wei Changqing-everyone talk about app', {x: 0, y: 0, fontSize: 24, anchor: 'top',}); const svg2 = textToSVG. getSVG ('invite you to participate in ', {x: 0, y: 0, fontSize: 16, anchor: 'top',}); const svg3 = textToSVG. getSVG ('course for everybody ', {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 requires support for Chinese fonts, Otherwise Chinese characters will be garbled

It took me more than 500 milliseconds to execute the command on my broken computer. It is enough. I hope to give you a reference.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.