1.

在小程序中生成分享海报是一个很常见的需求，目前主要有以下两种做法：

2.

直接由前端生成，使用小程序提供的canvasAPI

3.

由后端知晓云「云函数」生成，前端再获取

4.

本文将介绍通过知晓云「云函数」来生成分享海报的功能，并使用webpack和mincloud将代码打包上传到知晓云。

5.

技术栈：

6.

代码打包工具：webpack@4.22.0

7.

部署工具：mincloud@1.0.4

8.

图片处理：gm@1.23.1

9.

其他：知晓云SDK、imageMagick（云函数内置）

一、项目搭建10.

项目文件结构：

gm-draw-image├──index.js├──package.json├──src│└──index.js├──webpack.config.js└──yarn.lock复制代码11.

项目搭建与云函数代码打包示例文档基本一致。项目搭建好后，还需要安装以下依赖（两种安装方式选其一即可）：

//使用yarn安装yarnaddgmmincloud//使用npm安装npminstall--savegmmincloud复制代码12.

修改deploy脚本，如下：

//package.json..."scripts":{"build":"webpack--modeproduction","predeploy":"npmrunbuild"，"deploy":"minclouddeploygm-draw-image../"},...复制代码最终我们会使用以下两个命令来部署和测试：npmrundeploy//部署到知晓云mincloudinvokegm-draw-image//测试已经部署到知晓云上的云函数复制代码二、生成海报13.

这里分为4个步骤：

14.

下载海报需要的资源

15.

图片/文本处理

16.

海报绘制

17.

将绘制完成的海报上传到知晓云

18.

使用知晓云NodeSDK的request方法将资源下载下来（不能直接使用其他第三方request包）：

BaaS.request.get(url).then(res{}).catch(err{})复制代码引入gm库对图片进行处理，云函数沙箱环境已经内置`imageMagick`工具：constgmrequire('gm').subClass({imageMagick:true})复制代码19.

在处理文字的时候需要注意，设置字体时需选择知晓云已支持的字体，详见文档文档。

20.

另外，这里有一个bug：在同一个图层中，如果填充颜色之前有填充图片操作，那么后续填充的颜色将会不起作用。推荐的做法是如果有需要同时填充图片以及填充颜色，建议将这两个操作分开处理，最后再合成一张图。

21.

bug示例如下:

gm(width,height,'none').fill(bg)//填充了一张图片.drawRectangle(`0,0,${width},${height}`).fill('#fff')//字体颜色，这个操作不起作用.fontSize(20).drawText(140,170,'mincloud')复制代码下载图片，图片保存路径需在`/tmp/`路径下：BaaS.request.get(url,{responseType:'arraybuffer'}).then(res{}).catch(err{})复制代码22.

上传图片到知晓云：

varMyFilenewBaaS.File()MyFile.upload(img,{filename:'test.png'})复制代码23.

完整代码如下：

constfsrequire('fs')constgmrequire('gm').subClass({imageMagick:true})//海报资源constavatarImg'https://cloud-minapp-6.cloud.ifanrusercontent.com/1gQ5Mat7WAwyW1hl.jpg'constbackgroundImg'https://cloud-minapp-6.cloud.ifanrusercontent.com/1gQ7hCpFCK1qw8XQ.jpeg'constMyFilenewBaaS.File()constimageSize{width:375,height:250,}functiondownloadImage(url){constfilename`/tmp/${Math.random().toString().slice(2)}.jpg`constfilefs.createWriteStream(filename)returnBaaS.request.get(url,{responseType:'arraybuffer'}).then(res{file.write(res.data)file.end()returnfilename})}functionuploadImage(buffer){returnMyFile.upload(buffer,{filename:Math.random().toString().slice(2)+'.png'})}functiondrawText(filename){returnnewPromise((resolve,reject){gm(imageSize.width,imageSize.height,'none')//设置字体以及文字大小，这里只能设置云函数已支持的字体.font('/usr/share/fonts/ttf-bitstream-vera/VeraMoBd.ttf').fill('#fff').fontSize(20).drawText(140,170,'mincloud').fill('#fff').fontSize(14).drawText(30,200,'Aneasy-to-useMiniAppdevelopmenttool.').write(filename,function(err){if(err){returnreject(err)}resolve(filename)})})}functiongenAvatar(avatar){returnnewPromise((resolve,reject){gm(avatar).resize(100,100).write(avatar,function(err){if(err){returnreject(err)}resolve(avatar)})})}functiongenBackground(bg){returnnewPromise((resolve,reject){gm(bg).resize(500,350).blur(20,2).write(bg,function(err){if(err){returnreject(err)}resolve(bg)})})}module.exportsfunction(event,callback){const{width,height}imageSizeconstjob1downloadImage(backgroundImg).then(resgenBackground(res))constjob2downloadImage(avatarImg).then(resgenAvatar(res))constjob3drawText('/tmp/textLayer.png')Promise.all([job1,job2,job3]).then(res{gm(width,height,'none').fill(res[0]).drawRectangle(`0,0,${width},${height}`)//绘制背景.fill(res[1]).drawCircle(190,80,190,125)//绘制头像.fill(res[2]).drawRectangle(`0,0,${width},${height}`)//绘制文本.toBuffer('PNG',function(err,buffer){if(err){returncallback(err)}uploadImage(buffer).then((res){console.log('success')callback(null,res.data.file_link)}).catch(err{callback(err)})})})}复制代码三、部署并测试24.

跟npm一样，部署前需要先登录，请参照文档配置。

25.

使用以下命令即可将云函数部署到知晓云：

npmrundeploy复制代码26.

执行结果如下：

27.

使用以下的命令来测试：

mincloudinvokeimage-crawler复制代码执行结果如下：28.

上传到知晓云的图片如下：

29.

生成的海报效果图：

30.

素材原图：

四、参考文档31.

知晓云开发文档：doc.minapp.com/gm官方文档：aheckmann.github.io/gm/docs.htm…

五、源码32.

仓库地址：github.com/ifanrx/gm-d…