微信小程序云开发--证件照(3)(核心功能,人像分割)

·  阅读 586
微信小程序云开发--证件照(3)(核心功能,人像分割)

微信证件照小程序开发,第三话,经过周末的奋战,今天更新(图库/拍照)上传图片-图片的人像分割-图片的背景更换,这个是这个小程序的核心内容,其他的也就是数据的增删改查了

已经审核通过了

image.png

图片选择入口

image.png

我这里把这两个分开写的,也可以合在一起用一个按钮,然后点击微信会自动弹框让用户选择,效果大概是这样

image.png 微信提供的方法是# wx.chooseImage/wx.chooseMedia,官方文档连接

图片分割

上传完图片后,要把图片人像分割出来,实际也就是抠图,我看到腾讯云,和百度云都有人体识别,人像分割的接口,两者都可以用,我用的是百度的(我的腾讯云没有免费额度了),下面我就从百度的人像分割开始说了(具体的注册方法,实名认证等,就按系统一步步操作吧!)

image.png 我使用了这两个接口,一个手势识别我用来判断上传的图片是否为人像(看了上面的接口,没找到好点的),另外的就是人像分割接口了(现在好像加了内测接口,就是证件照接口,有兴趣的朋友们可以看下,我也在看,现在没用,以后应该会改下)

image.png

image.png 使用就直接看node.js SDK文档就可以了

image.png

代码实现

新建云函数,按照文档上面先下包

npm install baidu-aip-sdk
复制代码

image.png

// 获取图片url地址
	const tempFileURL = await getFileUrlByFileID(event.fileID)
	
	// 云存储图片
	const tmpOriginImgSrc = encodeURI(`${tempFileURL}?imageMogr2/thumbnail/1500x1500|imageMogr2/format/jpg`)
	// 获取图片buffer
	const imgBuffer = await getHttpBuffer(tmpOriginImgSrc)
	// 图片的base64
	const imageBase64 = encodeURI(imgBuffer.toString('base64'))
	//百度人像人脸检测
	const { result, result_num } = (await client.gesture(imageBase64))

	if(!result.length || result_num !==1 || result[0].classname !=='Face') return { res:false, msg: '图片不符合要求' }
	
	// 百度人像分割结果
	const { foreground, error_code, error_msg } = (await client.bodySeg(imageBase64, { type: 'foreground' }))

	if (error_code) return { res:false, msg: error_msg }
	if (!foreground) return { res:false, foreground, error_code, error_msg }

	const resultFileId = await uploadBase64(foreground, openid)
复制代码

总结

时间关系,先不说图片组合了,下次会把图片组合一起说完,一起更新,主要流程也算是走完了,下次整理后会分享出我的代码,一起学习。

刚提交了小程序,正在审核,等通过后会把小程序码放出来,先体验体验!!!

之后会持续分享,请持续关注哦!

码字不易,记得点赞哟!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改