在通常的项目中，我们经常需要生成活动营销海报。一般我们有一张海报的背景图片，然后动态获取用户头像，剪成圆形，动态获取用户昵称，动态生成用户特定的二维码，最后将用户圆形头像、昵称、二维码合并到背景图片中，生成用户特定的分享海报。以上几点可能会让你找半天的资料，但最后不一定有效，会耽误项目进度，影响心情。所以在这里分享一些最近的经验，让你看完这篇文章后，可以在node.js的环境中完美的实现这个需求。下图为背景图，点击查看生成的海报图片。

首先总结一下这个要求，我们需要在一个背景图像上附加一些图像来合成一个新的图像。通过在网上搜索资料，我们发现有几个库或者包可以实现图像合成的功能：GraphicsMagic，images，sharp。

1.要使用GraphicsMagic，首先在计算机上安装GraphicsMagic，然后使用npm在项目中安装gm依赖项来调用GraphicsMagic的函数。我本地是Mac OS系统，服务器端是Ubuntu系统。感觉这种给这台机器安装额外软件的方式很不友好，也很麻烦。可能有坑，所以没有选择这种方式。

2.要使用包映像，更好使用npm直接将其安装到项目中。但是以上一系列的功能并不是只用图像就能完成的，图像和锐界需要一起使用。这时，一个坑出现了。安装了npm的镜像是3.0.2版，一年没更新了，然后出现系统兼容性问题。在Mac OS系统上，更高支持节点10，而在Linux系统上，更高只支持节点8。因为映像应该与sharp一起使用，sharp要求节点版本大于10.13.0，所以这两个包不能在Linux系统上同时使用。以上功能在开始的时候都是在本地的Mac上使用图像和sharp的结合来开发的，但是部署到Ubuntu上就不能用了。所以最后还是放弃了这个方法。

3.最后通过查询sharp的文档，发现上面的图像合成功能完全依靠sharp就可以实现，所以最后还是用sharp来完成。

我们先把用户的方形头像转换成圆形头像。如果显示在首页，可以直接设置img标签的边框半径样式。但是如果node.js的服务器端有一个方形头像图片，需要生成圆形头像怎么办？

首先，如果我们获取的用户头像是网络图片，比如用户的微信头像，我们首先将方形头像保存为本地图片。当我们发出GET请求时，url会写头像地址，网络请求会把图片数据返回给我们，然后我们就可以把图片数据写入本地文件了。网络请求使用请求-承诺包。需要注意的是，在请求中，需要指明编码为空或者‘二进制’，这样得到的数据保存为图片后才能正常打开，否则保存得到的数据后的图片无法打开。

从“请求-承诺”导入rp

从“fs”导入fs

const选项={

方法： 'GET '，

uri : ' http://thirdwx.qlogo.cn/mmopen/VI _ 32/q0j 4 twgtftlaiphkizume 4qijisicnhjnahoibsecb 0 gpiak 95 hx 7 tbnge 3 yesmwlih1x 9 e 9 iaihjzwckiaas 1 gqyfymq/132 '，//头像地址

编码： '二进制'//或者它也可以为空

}

rp(选项)。然后(响应={

fs.writeFileSync('avatar.png '，响应，' binary ')

})

假设我们要保存的头像文件是avatar.png，调用fs的writeFileSync方法，将图片数据同步写入文件。注意第三个参数，也写‘二进制’。然后你可以发现头像已经保存在本地，可以正常打开。接下来，我们将把方形头像转换成原型头像。

头像转换用的是Sharp，需要先用npm在项目中安装sharp包。然后我们创建一个缓冲区，它读取一个svg，这个svg包含一个矩形。因为我们最后想把原型头像的尺寸调整到100*100，svg中rect的宽度和高度都是100。rx和ry用来表示圆角，圆角设置为半宽半高，是一个圆(实际上是一个圆角矩形)。如果不太了解Buffer和svg，可以先了解一下。然后我们使用夏普的合成方法合成圆形svg和方形头像，然后我们可以得到一个圆形头像。请注意，混合有多种类型，因此您可以分别尝试。dest-in可以达到预期的效果。

从“夏普”导入夏普

const roundedCorners=buffer . from(

svgrect x=' 0 ' y=' 0 ' width=' 100 ' height=' 100 ' rx=' 50 ' ry=' 50 '/SVG

)

夏普(' avatar.png ')。调整大小(100，100)。复合([{ input : rounded corner，blend: 'dest-in'}])。png()。toFile(' Circlevatar . png ')

接下来，我们将二维码图片保存在本地。如果你得到一张二维码图片，你可以按照上面的方式发出GET请求，然后将请求结果直接保存到本地图片中。如果您获得了一个链接，并准备从该链接生成二维码，您可以使用二维码包。这个包很容易用来生成二维码，很多东西可以自由配置。

从“二维码”导入二维码

QRCode.toFile('qrcode.png '，' http://weixin . QQ.com/q/02 qnmshsqldhl 10000g 077 '，{

margin: 2，

宽度： 240

})

接下来，我们将用户昵称转换为本地图片。我们得到的用户昵称是一个字符串，所以我们应该使用文本到svg的包，并将其转换成svg。您可以设置字体、字体大小、颜色和许多其他参数。然后通过sharp把svg文件变成png文件，因为最后合成海报的时候需要图片文件。

从'文本到svg '导入文本到SVG

从“夏普”导入夏普

const TextTosvg=TextTosvg . LoadSync()

const attributes={ fill : ' white ' }；

const options={x: 0，y: 0，fontSize: 40，anchor: 'top '，attributes 3360 attributes }；

const SVG=TextTosvg . GetSVg(' mofiter '，选项)

fs.writeFileSync('nickname.svg '，svg)

等待夏普('昵称. svg ')。png()。toFile('昵称. png ')

当我们得到圆头图片circleAvatar.png、二维码图片qrcode.png和昵称图片nickname.png时，我们可以使用夏普的合成方法将这些图片合并到海报背景图片background上，以生成个人海报。要合并的图片在背景上的位置可以通过左和上来指定。

sharp('background.png ')。复合([{ input : ' Circlevatar . png '，left:65，top:80}，{input:'nickname.png '，left:180，top:80}，{ input 3360 ' QR code . png '，left:760，top:1620}])。png()。toFile('海报. png ')

通过以上步骤，可以生成完整的海报。使用的时候要注意ES6的语法以及同步和异步的问题。希望这篇文章能帮到你。