页面效果

项目简介

页面允许上传一张有头像的图片，点击一键裁剪图片，然后减去背景后返回图片，裁剪完成的图片会保存在本地，数值是动态获取的，和外观测试小程序里的固定值不一样，后续我们会出进阶方法（裁剪保存后换背景）的文章，有兴趣的请继续关注！

百度AI人像分割

本示例采用在线API调用，注册后可免费调用，每日有使用限制，只要不用于商业用途，本地测试、个人使用都足够。

功能逻辑

wxml页面主要展示两部分内容，一部分是用户上传图片的呈现，另一部分是抠图后图片的呈现。为了效果好看，默认提供了一张图片，定义在js数据中；抠图完成后会弹出模态对话框提示用户是否下载处理后的图片到本地。用户上传图片功能使用微信小程序自带的wx.()方法。指定需要上传的图片数量、大小、来源。上传成功后可以获取图片的临时路径，用于赋值并显示在wxml页面中；百度的人像分离接口官方技术文档有更详细的说明。使用接口必须对图片进行格式化和编码，这里使用微信小程序的()方法实现图片编码。通过,pass,type（默认返回二值图、灰度图和前景抠图）。 为了让处理更快，可以指定需要的返回类型，这里只返回前台抠图，请求成功后即可获取需要的数据，如果请求错误，服务端会返回错误码和错误信息，可进行判断并输出，本程序不做判断，用户可以参考官方文档自行判断并输出。

难度分析

1：格式化图片显示

百度AI人像分离API处理后返回的前景抠图是经过编码的，如果想直接在组件中显示，可以使用以下代码

2. 剪裁完成后上传图片

使用微信小程序的wx.()文件管理器的图片上传方法指定写入路径、文件、编码格式，图片名使用随机函数生成。

三：动态获取

这里微信小程序wx.()用于设置系统本地缓存数据，wx.()用于获取本地缓存数据。

实施步骤

访问百度AI平台，注册账号，创建应用，生成API key和key

开放能力 -> 人脸与身体识别 -> 人像特效 -> 人像分离 -> 立即使用 -> 创建应用

wxml静态页面完成

打开微信开发者工具新建页面，编写wxml页面代码

3：wxss页面样式完成

4：改进js页面代码，实现一键抠图功能

对于背景复杂的抠图，这个API处理效果不是特别好，还是需要借助PS，可以参考第二篇文章，需要源码的可以公众号后台私聊我，谢谢阅读与支持！