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

小程序制作證件照過程利用canvas制作生活中常用的證件照，壓縮圖片，修改圖片dpi 。希望給大家?guī)矸奖?。
證件照小程序制作要點

上傳合適的圖片，方便制作證件照
調用AI接口，將圖像進行人像分割。這里我用的是百度AI
調用人體關鍵點為分析圖片中頭部和肩部的位置信息。為后滿裁剪圖片提供依據(jù)
利用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

【微信小程序canvas 證件照制作】

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 來進行分析。