微信小程序canvas 证件照制作 _生活百科

小程序制作证件照过程利用canvas制作生活中常用的证件照，压缩图片，修改图片dpi 。希望给大家带来方便。
证件照小程序制作要点

上传合适的图片，方便制作证件照
调用AI接口，将图像进行人像分割。这里我用的是百度AI
调用人体关键点为分析图片中头部和肩部的位置信息。为后满裁剪图片提供依据
利用canvas 将头部和肩部位置制作为新的证件照尺寸照片
改变图片的背景颜色，生成不同要求的背景证件照
导出图品前将图片修改为符合打印要求的dpi 。
下载最终生成好的证件照

上传合适的图片，方便制作证件照

selectImg(selectid){let _this = thislet typelist = selectid === 1 ? ['camera'] : ['album']uni.chooseImage({count: 1,sourceType: typelist,success: (res)=> {}});}

调用AI接口，把图像进行人像分割,分析图像中头部肩部位置信息

[参考链接地址] https://cloud.baidu.com/doc/BODY/s/Fk3cpyxua

文章插图
该接口中要求上传的图片格式为base64 格式，大小不超过4M. 并且需要access_token

文章插图
获取access_token 参照百度AI 的文档 https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu

文章插图
定义好请求地址。和请求的请求方法

const baseUrl = 'https://picapp.gxwj123.top/prod-api/'const baidubce = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/'export const tokenUrl = `${baseUrl}txy/zjz/token`export const body_seg_url = `${baidubce}body_seg?access_token=`export const body_analysis_url = `${baidubce}body_analysis?access_token=`import {tokenUrl, body_seg_url, body_analysis_url} from './url.js'export const request = async (url) => {let header = {'Content-Type': 'application/json',};	let result = await new Promise((resolve, reject) => {uni.request({url: url,method: 'post',header: header,success(res) {if (res.statusCode == 200 && res.data.code == 200) {resolve(res.data.data);}},fail(err) {reject(err);}});});return result};export const baiduRequest = async (url, data) => {let header = {'Content-Type': 'application/x-www-form-urlencoded',};	let result = await new Promise((resolve, reject) => {uni.request({url: url,method: 'post',header: header,data: {image: data.image},success(res) {resolve(res);},fail(err) {reject(err);}});});return result};export const getAccessToken = (data) => {return request(tokenUrl, data,)}export const body_seg = (data) => {let url = `${body_seg_url}${data.access_token}`;return baiduRequest(url, data)}export const body_analysis = (data) => {let url = `${body_analysis_url}${data.access_token}`;return baiduRequest(url, data)}export const getImageInfos = (data) => {return new Promise((resolve, reject) => {Promise.all([body_seg(data), body_analysis(data)]).then(([seg, analysis]) => {console.log(seg, analysis)if (seg.statusCode == 200 && analysis.statusCode == 200) {let data = https://www.huyubaike.com/biancheng/{bodySeg: seg.data,bodyAns: analysis.data}resolve(data)}else {reject('请求任务出错')}})})}

上传的图片格式调整为base64

toBase64(file) {let _this = thisuni.getFileSystemManager().readFile({filePath: file, //选择图片返回的相对路径encoding: 'base64', //编码格式success: res => {// 成功的回调// 'data:image/jpeg;base64,'let base64 = res.data;_this.getImgInfos(base64)}});},

将人像分割接口返回的图片和人体位置信息分析的坐标结合。生成用于制作证件照的素材。下面的将使用1寸证件照的尺寸和dpi 来进行分析。

从位置信息分析接口中取出要使用的位置，比如头部，肩部。人像分析中取foreground，为去掉原图中人物信息以外的图片

initImgData(bodyAns,bodySeg) {if (bodyAns.person_num > 1) {uni.showToast({title: '图片检测到多个人像，请重新上传',icon:'none',duration: 2000});return}if (bodyAns.person_num == 0) {uni.showToast({title: '图片未检测到人像，请重新上传',icon:'none',duration: 2000});return}let widthInfo = bodyAns.person_info[0]let location = this.imgwidthsum(widthInfo)this.location = locationlet foreground = bodySeg.foregroundthis.foreground = foregroundthis.previewImg('data:image/png;base64,' + foreground, location).then(filePath => {this.canvasImages = filePaththis.buildOver = true})},imgwidthsum(data) {let body_parts = data.body_partsreturn {top_head: body_parts.top_head,left_shoulder: body_parts.left_shoulder,right_shoulder: body_parts.right_shoulder}},