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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.