项目场景：

最近发现一个好玩的小程序，那就是证件照制作，不知道是干嘛的可以微信搜索一下“证件照”，会有特别多这样的小程序，自个体验下，那么在小程序云开发中可以怎么去实现这一功能了？

效果展示：

功能分析：

首先我们来分析一下这项目的大致功能，首先需要一张图片，然后把这张图片的人物与背景分离，接着把分离后的人物放到一个容器，之后做一个选项按钮来更改容器的背景颜色，最后将其合并保存成新的图片就好了。

具体实现：

1.首先为了方便截取图片，我使用了SimpleCrop截图插件，但是在开发过程中，我发现用开发工具的模拟器选取图片后进入编辑页面有时会加载不出图片，报路径500的服务器错误，不过重启一下开发工具就好了，真机中还没发现有这一问题，如果不喜欢可以自行去掉使用官方的。
2.接着因为截取的图片不能直接换取https链接，所以我们先要把截图上传到云服务器换取https链接，然后我们需要用到一个腾讯云的人工智能api，叫SegmentPortraitPic （人像分割），它能将图片的人物抠出来，之后我们将抠图保存到云服务器。
3.接着需要使用canvas画布组件来当容器，当渲染时动态设置一个背景颜色并且把图片填充进画布就好。
4.接着点击保存时，使用wx.canvasToTempFilePath接口将画布转化成图片后保存到云服务器就好，这里有个坑，就是官方案列用了canvasId来获取组件的元素时，不管怎么在组件里定义都不管用，最后换了canvas对象才成功了。
5.最后为了不占用服务器内存，在小程序隐藏或卸载时，我把云服务器存放截图、抠图、证件照的文件夹都清理了，可以自行取舍。
6.最后的最后的，说一些细节的问题，因为证件照有很多尺寸，所以我动态截取了图片的宽高，并且为了画布显示效果美观，我固定了画布的高，而宽则是动态换算的，后期自己可以加一个自定义宽高的选项，我这里就不把项目做复杂了；用于人像分割API以及将画布渲染到页面时使用的图片务必是https链接，用fileID是不行的，在下在这卡了许久，所以先上传到云服务器之后用fileID去换取https链接是不可少的步骤。

项目使用：

代码我就不粘出来了，有点多，需要的话有积分可以下载CSDN的，没有的话下载百度云的就好。
CSDN=》传送门（已更新成3倍截取图片）
Gitee=》传送门（3倍截取图片）
百度网盘=》提取码：fx4y =》传送门

▲在开通腾讯云的人像分割前先看下下面资源包的描述，简单点说就是开通后每个月会送1000次免费的次数，之后就要收费了，不过对于我们来说完全够用了。

使用说明：
预付费资源包支持多种规格，有效期均为1年，1年内若资源包次数未使用完，则过期作废；预付费资源包购买后不支持退款和剩余次数冻结。
您每月都可以免费享受一定额度的免费调用（1000次/月），该免费额度将以预付费资源包的形式在每个月1号自动发放，仅在当月有效。
调用量的扣费顺序为“免费资源包->付费资源包->后付费”。如果您未购买付费资源包，则在免费资源包用完时将直接自动转入后付费；如果您已购买付费资源包，则在免费资源包用完时将自动转为付费资源包扣减，当付费资源包耗尽时将转为后付费方式按月进行结算。如果您同时购买了多个付费资源包，则按照购买时间的先后顺序进行扣减，先买的先扣。

①.在使用项目前，需要自己去腾讯云注册一个账号，好像需要实名制才可，之后我们进入首页，点击产品=》人工智能=》人体识别=》人体分析，

进入人体分析后有个免费体验，自个可以去看下，我们接着点击管理控制台，

之后选择人像分割的二分类人像分割，勾选开通

开通后我们点击文档链接，在弹窗里的接口描述找到测试按钮后点击

之后我们就进入了SegmentPortraitPic接口调试区，点击在线测试，随便选择一个地域区，接着去百度随便复制一张图片链接粘贴到URL输入框后点击发送请求，成功后会返回一个叫ResultImage的 Base64 编码格式的图片，这时说明我们的接口打通了。如果返回了错误，可以点击查看文档导航按钮，找到错误码自己看下有什么问题。（另外需要注意一下图片分辨率须小于2000*2000 ，图片 base64 编码后大小不可超过5M）

②.接着上边，下载项目后用自己开通过云开发的小程序AppID导入项目，

打开项目后打开app.js文件把环境ID换成你自己的，

接着我们分别打开ClearingRedundantFolders和SegmentPortraitPic云函数的index.js，把环境ID换成你自己的，

紧接着先回到腾讯云，点击头像=》访问管理=》访问秘钥=》API密钥管理，没密钥的先新建一个，我把secretId和secretKey分别复制到的ClearingRedundantFolders和SegmentPortraitPic云函数替换保存，

紧接着一定要把云函数部署到云端

最后，调试的时候不要用真机调试，因为用到了SimpleCrop选图插件，它不支持真机调试，用预览调试就好了

最后的最后，务必看完文章的错误相关，因为调用人像分离AP处理图片需要的时长比较久，可能导致云函数调用超时，偶尔出现选图后一直转圈的情况

错误相关：

最近很多小伙伴反馈选取图片后会一直转圈，然后这次我在真机使用中也遇到了，我是有时行，有时不行，还好这次在微信公众平台=》开发=》开发管理=》运维中心=》错误日志里捕获到这条错误信息：cloud.callFunction:fail Error: errCode: -504003 | errMsg: Invoking task timed out after 3 seconds

意思是云函数调用超时了，云函数默认超时时长为3秒，因为在微信开发工具很少遇见这个问题，所以我把云函数超时设置成了1秒，之后确实出现了这个问题，所以我们把SegmentPortraitPic这个人像分割的云函数时长调长一点之后应该就不会出现这个问题了，具体可以看下面的GIF:

好了说一下重点，同理的，如果还有其他报错，你可以先自己用开发工具控制台、微信公众的错误日志、手机的开发调试去捕获一下异常，网上查查看能不行解决，别上来就我不行了，我不行了。各位大佬，我也不是万能的啊(ಥ﹏ಥ)

图片质量：

想要调整证件照的清晰度，就必须把人像分割后的图片质量提上去，想要把人像分割图片的质量提上去，就必须传入像素接近2000px图片（2000px是人像分割Api支持的最大像素），所以归根到底就是把截取图片的像素放大就好了，因为我们的证件照是有尺寸的，所以不能随便放大倍数截取图片，目前我们的最大像素是两寸的579px，又579x3=1737，所以放大3倍截取图片比较合理，放大4倍的话就超过2000了，放大3倍后，相当于把一张比画布大3倍的图片塞进画布里，自然而然的就比1：1的时候清晰了。调整后红发的轮廓、纹理都变清晰了，霸气更猛了，具体怎么修改看一下下面GIF：

有一个细节就是当我们打开了云控制台的图片目录时，关闭或返回小程序是清理不了文件夹的，因为目录在使用的状态。另外后续下载的代码我可能会默认改成3倍的了

我发现wx.chooseImage()，又又又要被抛弃了，取而代之的是wx.chooseMedia()，诶，腾讯这api也太经不起考验了吧，社区一堆问题没解决，出api的频率到是挺快。如果想要使用的话把index.js文件的chooseCropImage方法改成下面的代码就行了，但是好不好用我就不知道了，所以我就不把它写到demo里了

  // 选取裁剪图片chooseCropImage: function () {let self = this;wx.chooseMedia({mediaType: ["image"],success(res) {// console.log(res)self.setData({visible: true,src: res.tempFiles[0].tempFilePath})}});},

放大3倍后截取的图片大小能达到1、2M，所以人像分割Api处理的时间也会变长，所以务必把SegmentPortraitPic这个人像分割的云函数调用时长调久一点

over~

最后想补习云函数的可以点击这里哦！！传送门

微信小程序云开发-证件照的实现相关推荐

微信小程序云开发快速入门手册-告别切图仔的时刻到了
文章很长,建议先收藏,有充分的时间再学习,没有小程序基础的,也阔以先收藏哦. 本文章会手把手带各位小伙伴入门微信小程序云开发,因为我还不是全栈工程师,所以不是特别清楚前后端分离模式下,后端工程师需 ...
python操作微信小程序云端数据库_微信小程序云开发之数据库操作
本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序浏览量:1120 时间:2020-04-06
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...
php访问微信云数据库,第三方服务器php获取微信小程序云开发access_token和云数据库...
微信小程序云开发开放了http api,可以从第三方访问云服务了.方便很多.云服务的后台,可以用PC端写了. 流程大概就是通过appid,appkey获得access_token,这个access_t ...
微信小程序-云开发云调用API没有权限(no permission)问题
今天在学习微信小程序云开发中的在云函数中使用云调用api templateMessage.send 时,在开发环境中运行报错:function has no permission to call th ...

微信小程序云开发-证件照的实现

文章目录