一个生成证件照的小程序，微信云原生开发小程序.zip

const hexRgb = require('./hex-rgb') const { default: touch } = require('./touch') const imgSecCheck = require('./imgSecCheck') // 在页面中定义激励视频广告 let videoAd = null // 全局数据，非视图中绑定的数据 const pageData = { originTempFilePath: '', originImgPath: '', originImgType: '', compressImagePath: '', } Page({ /** * 页面的初始数据 */ data: { tabIndex: 0, videoLoaded: false, // 是否有视频广告 targetWidth: '', // 目标图片宽度 targetHeight: '', showScale: 1, // 图片缩放比例 count: 0, // 用户剩余次数 vipCount: 0, // vip抠图剩余 filePath: '', // 普通版透明图 filePath2: '', // 精细版透明图 guided: '', // 指引已完成 guideStep: 1, // 指引第一步 hideDownloadBtn: false, // 隐藏下载按钮 bgc: '#ffffff', // 照片背景色，选项非实际颜色 photoBg: '#ffffff', // 实际颜色 customBg: '#ff0000', showColorPicker: false, // 颜色面板是否打开 portrait: { initImgHeight: 0, width: 0, height: 0, left: 0, top: 0, scale: 1, }, clothes: { show: false, src: '', initImgHeight: 0, width: 0, height: 0, left: 0, top: 0, scale: 1, }, hair: { show: false, src: '', initImgHeight: 0, width: 0, height: 0, left: 0, top: 0, scale: 1, }, suportCropImage: !!wx.cropImage }, // 切换普通抠图 、精细抠图 changeTab(event) { if (!this.data.guided) return this.setData({ tabIndex: +event.currentTarget.dataset.index }) }, //选择改色时触发（在左侧色盘触摸或者切换右侧色相条） onChangeColor(e) { this.setData({ photoBg: e.detail.colorData.pickerData.hex, customBg: e.detail.colorData.pickerData.hex, }) }, // 切换背景 toggleBg(e) { const bgc = e.currentTarget.dataset.color; const showColorPicker = bgc === 'custom'; const photoBg = showColorPicker ? this.data.customBg : { red: '#ff0000', blue: '#438edb', blue2: '#00bff3', white: '#ffffff', transparent: 'transparent' }[bgc] this.setData({ bgc, showColorPicker, photoBg }) }, //关闭拾色器 closeColorPicker() { this.setData({ showColorPicker: false }) }, // 图片合成 async composeImage() { wx.showLoading({ title: '制作中...', }) const { photoBg, targetWidth, targetHeight, tabIndex, filePath, filePath2, clothes, hair, portrait } = this.data // 将颜色转为 rgba值 const bgc = hexRgb(photoBg, { format: 'array' }) // 底图 const baseImg = { bgc, width: targetWidth, height: targetHeight } // 人像图片vip src const vipSrc = (tabIndex === 1 && filePath2) // 人像图 const peopleImg = { src: filePath || vipSrc, ...this.computedXY(baseImg, portrait) } // 发饰图 const hairImg = { src: hair.src, ...this.computedXY(baseImg, hair) } // 衣服图 const clothesImg = { src: clothes.src, ...this.computedXY(baseImg, clothes) } // 组合图片顺序 const data = [baseImg, peopleImg, hairImg, clothesImg] // 合成图片 返回url const { result } = await wx.cloud.callFunction({ name: 'imageCompose', data: { imgType: 'jpg', dataType: 'url', data } }) this.downloadAndToComplate(result.value, vipSrc) }, // 下载并跳转 async downloadAndToComplate(url, isVip) { let msg = '' try { // 下载图片到本地 const { tempFilePath, dataLength } = await this.downloadImg(url) const { targetWidth, targetHeight } = this.data const size = (dataLength / 1024).toFixed(2) msg = `图片像素${targetWidth + ' * ' + targetHeight}，图片大小${size}kb` // 保存图片到相册 await this.saveImage(tempFilePath, isVip) // 使用重定向，因为返回时要返回到选择照片页面 wx.redirectTo({ url: '../complete/complete?msg=' + msg + '&tempFilePath=' + tempFilePath + '&url=' + url, }) } catch (error) { console.log(error) msg = '下载失败，点击下图预览保存图片。' wx.redirectTo({ url: '../complete/complete?msg=' + msg + '&tempFilePath=' + url + '&url=' + url, }) } }, // 计算相对底图的 x ， y computedXY(baseImg, imgData) { const initImgWidth = this.data.targetWidth const left = (imgData.left - initImgWidth / 2) const top = (imgData.top - imgData.initImgHeight / 2) const noScaleImgHeight = baseImg.width * imgData.initImgHeight / initImgWidth const resultImgWidth = baseImg.width * imgData.scale const resultImgHeight = noScaleImgHeight * imgData.scale const scaleChangeWidth = (resultImgWidth / 2 - baseImg.width / 2) const scaleChangeHeight = (resultImgHeight / 2 - noScaleImgHeight / 2) const x = left - scaleChangeWidth const y = top - scaleChangeHeight return { x, y, width: resultImgWidth, height: resultImgHeight } }, // 将远端图片，下载到本地 downloadImg(url) { return new Promise((resolve, reject) => { wx.downloadFile({ url, success(res) { if (res.statusCode === 200) { resolve(res) } else { reject(res) } }, fail(error) { reject(error) } }) }) }, // 保存图片到相册 saveImage(tempFilePath, isVip) { return new Promise((resolve, reject) => { wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success: () => { if (!isVip) this.useCount() resolve() }, fail(res) { wx.getSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { wx.showToast({ title: '下载失败，点击帮助', icon: 'none' }) reject(new Error('错误')) } else { wx.openSetting({ success() { }, fail(res) { wx.showToast({ title: '失败，写入相册权限未授权', icon: 'none' }) reject(new Error('错误')) } }) } }, fail() { reject(new Error('错误')) } }) }, }) }) }, // 观看广告 lookVideo() { // 用户触发广告后，显示激励视频广告 if (videoAd) { videoAd.show().catch(() => { // 失败重试 videoAd.load() .then(() => videoAd.show()) .catch(err => { videoAd.load() .then(() => videoAd.show())