node文字生成图片的示例代码

前端之家收集整理的这篇文章主要介绍了node文字生成图片的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天老板提了需求,要在服务端生成邀请卡,嗯…,简单的说就是把要这张: @H_404_1@

@H_404_1@ @H_404_1@

变成差多这样的: @H_404_1@

@H_404_1@ @H_404_1@

后端搞ruby的哥们搞了个html转图片,说转得太慢了,我就把这坑接下来了 @H_404_1@

所以睡前就倒腾了下,搞了个简单的实现@H_404_1@

解决思路

@H_404_1@

文字转svg -> svg转png -> 合并图片@H_404_1@

相关轮子@H_404_1@

  1. images Node.js 轻量级跨平台图像编解码库,不需要额外安装依赖
  2. text-to-svg 文字转svg
  3. svg2png svg转png图片

示例代码@H_404_1@

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('邀请您参加',fontSize: 16,});

const svg3 = textToSVG.getSVG('人人讲课程',fontSize: 32,});

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

注意事项@H_404_1@

text-to-svg需要中文字体的支持,不然中文会乱码 @H_404_1@

在我的破电脑上执行一次只花了500多毫秒,感觉足够了,分享出来希望能给大家一个参照 @H_404_1@

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。@H_404_1@ 原文链接:https://www.f2er.com/nodejs/35543.html

猜你在找的Node.js相关文章