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