公众号【名狮】工作三个月了。期间共更新分析经典面试题22篇，精选文章60篇。更有什者，是艰辛与收获并存的三个月。公众号发布文章时，需要为文章配置封面图。我通常的做法是在网上搜索一张图片，然后用PhotoShop将文章的标题添加到图片中，然后导出生成的图片，如下图所示：添加了一行文字。操作步骤简单，但每次都需要打开PhotoShop修改文字，感觉繁琐重复。代码可以用来解决日常生活中遇到的重复性任务吗？实施方案的总体思路：文字和图形不能直接合并。需要先将文字转换成图形，再合并图形。大致步骤如下：使用text-to-svg将文本转成SVG图形；使用sharp将SVG图形和背景图像合并；分析与实现：1.将文本转换为SVG图形将文本转换为SVG图形，需要使用Node的模块text-to-png，它可以将文本按照指定的字体生成SVG图形。SVG意为可缩放矢量图形（ScalableVectorGraphics），缩放时不损失图形质量，SVG是以XML格式定义的图像，如下图：在html页面中嵌入一个SVG来表示一个三角形html>
/body>显示效果：SVG很好的充当了一个中间变量。言归正传，看看代码是如何实现转换的：letpath=require('path');letTextToSVG=require('text-to-svg');//可以从C:下载或复制字体\Windows\FontsletfontPath=path.join(__dirname,'./fonts/msyhbd.ttf');lettextToSVG=TextToSVG.loadSync(fontPath);//加载字体文件letoptions={x:0,//文本开始的水平位置（默认：0）y:0,//文本基线的垂直位置（默认：0）fontSize:36,//字体大小锚点:'top',//坐标中的对象锚点//letterSpacing:"",//设置字母间距属性:{fill:'#FFFFFF'//文字颜色}}lettextSVG=textToSVG.getSVG('【名狮在前端】',options);console.log(textSVG);输出结果：2.合并有图片合并很多库，比如gm，jimp，mapnik，sharp等，其中sharp是基于libvips库实现的，性能是最高的，所以我用sharp来合并图形。lettextSVG=Buffer.from(textSVG);letbgPath=path.join(__dirname,'./img/bg.jpg');lettargetPath=path.join(__dirname,'../dist/bg.jpg');sharp(bgPath).composite([{input:textSVG,gravity:'center'}]).toFile(targetPath);sharp库注意事项由于libvips是基于C++实现的，sharp库需要基于C++源码编译构建才能使用.node-gyp编译C++为node扩展时使用的编译工具，但是node-gyp依赖python和VC++构建工具编译，所以需要先安装python和VC++环境，最简单的方法就是执行下面的安装命令顺序：//安装构建环境python、vc++npminstall--global--productionwindows-build-tools//安装node-gyp编译工具npminstall--globalnode-gyp//安装sharpnpminstallsharp在官方文档中，使用sharp进行图片合并时，给出的api是overlayWith，但是你会发现这个api是不存在的。这是因为sharp最新的0.23.3版本删除了overlayWith，取而代之的是composite。至此，我们就实现了一个简单的生成公众号封面图的功能，我们来看看生成效果：总结一下程序，可以帮助我们做重复的事情，提高生产力。如果程序员写的代码用来解决自己生活中遇到的问题，对于程序员来说无疑是巨大的动力来源。推荐阅读【问题22】理解JS模块化【深入vue】为什么Vue3.0不再使用defineProperty实现数据监控？抛开jenkins，如何使用node从零开始搭建自动化部署管理平台深入了解前端部署的演进史深入了解ES6Iterator深入解读HTTP/2和HTTP/3的新特性（推荐）跟着我扫一扫关注我公众号【前端名狮】，更多精彩内容陪你！
