接到个项目做微信小程序的,需要将手机中的页面保存到手机相册中,效果图如下
首先想到的就是利用canvas画图然后在保存到相册,看起来很简单网上也有很多例子,但都不完整,很多网友分享的都在半吊子工程,只是简单的实现效果和代码整理出来,应该是页面还没上线就分享的缘故吧,直接使用它们的代码实现,只能做出粗糙的效果,还有兼容性和坑没有体现和总结出来.我这里是完完全全可以上线的效果.做了几天,主要是想总结一下这些坑.
啥也别说了,直接上代码吧!!!!
1.html
<view class='wrap' style="height:{{screenHeight}}" ><view class='top'><view class='portrait'><image src="{{portrait_url}}" ></image></view><view class='name'><text>{{user_name}}</text></view><view class='luck_name'> <text>{{luck_level_preMsg}}{{luck_level}}</text></view><view class='luck_item'><text>{{luck_name}}</text></view><view class='luck_pic'> <image src="{{luck_image}}"></image> </view><view class='luck_app'> <image src="{{wxAppImage_url}}"></image> </view><view class='luck_tips'> <text>{{tipMsg}}</text> </view></view></view><view class='bottom'><view class='btn' bindtap='doSavecanvasImage'>保存到手机</view></view><view class='canvasstyle'><canvas style="width:{{canvasWidth}};height:{{canvasHeight}};" canvas-id='myCanvas' ></canvas> </view><view class='images'><image src='{{portrait_url}}' bindload="loadImg1"/><image src='{{luck_image}}' bindload="loadImg2"/><image src='{{wxAppImage_url}}' bindload="loadImg3"/></view>
3.js
const app = getApp()let util = require('../../../utils/util.js');import http from '../../../utils/service';Page({/*** 页面的初始数据*/data: {canvasHidden: true,count:0,timer:null,getPageData_url: '/discovery/draw/result/getSharePage.draw',portrait_url: '',user_name: '',luck_level_preMsg: '恭喜您获得',luck_level: '', //获得几等奖luck_name: '', //奖品名称luck_image: '',wxAppImage_url: '/download/zztj-hrx-dmz-prd/9d91cddf67d1283c01687fd6a4b70040', //小程序名称tipMsg: '长按识别小程序，「HRX抽奖」好运爆棚~', //小程序名称shareImgPath: '',canvasWidth:'',canvasHeight:'',screenWidth: '', //设备屏幕宽度; screenHeight: '',//浏览器高度ratio: '',unit:'',shareImgSrc: '',shareTempFilePath: '',networkStatus: true,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getPageData(options);let that = this;wx.hideTabBar(); //隐藏底部Tab导航wx.getSystemInfo({ //获取用户设备信息，屏幕宽度success: res => {that.setData({screenWidth: res.screenWidth,screenHeight: res.screenHeight - 140 + 'px',ratio: res.pixelRatio,canvasWidth: res.screenWidth+"px",canvasHeight: (res.screenWidth / 375) * 540 + 'px',})}})},onHide: function () {this.data.timer && clearInterval(this.data.timer);},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {var that = this;var context = wx.createCanvasContext('canvas')},drawcancas: function () { //绘制文本//设置画布相关属性var ratio = this.data.ratio;var unit = this.data.screenWidth / 375;var ctx = wx.createCanvasContext('myCanvas');ctx.setFontSize(14);ctx.textAlign = 'center';//绘制背景图;ctx.fillStyle = "#FFF";ctx.fillRect(0, 0, this.data.screenWidth,520);//test绘制圆形的头像 ctx.beginPath();let avatarurl_width = 40; //绘制的头像宽度let avatarurl_heigth = 40; //绘制的头像高度let avatarurl_x = this.data.screenWidth / 2 - 20; //绘制的头像在画布上的位置let avatarurl_y = 30; //绘制的头像在画布上的位置ctx.setStrokeStyle('#FFF');ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2);ctx.save();ctx.clip();ctx.drawImage(this.data.portrait_url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);//头像;ctx.restore();ctx.setFontSize(14);ctx.fillStyle = '#1D1D26';ctx.fillText(this.data.user_name, this.data.screenWidth / 2, 92);//名字;ctx.font = '18rpx PingFangSC-Regular'ctx.fillText(this.data.luck_level_preMsg + this.data.luck_level, this.data.screenWidth / 2, 130);//几等奖ctx.font = '14rpx PingFangSC-Regular';ctx.fillText(this.data.luck_name, this.data.screenWidth / 2, 160);//绘制奖品名称;ctx.drawImage(this.data.luck_image, 40, 180, this.data.screenWidth - 80, 170);//绘制奖品图像;ctx.drawImage(this.data.wxAppImage_url, this.data.screenWidth / 2 - 45, 370, 93, 93);//绘制二维码;ctx.setFontSize(14);ctx.setFillStyle('#5e7436');ctx.fillStyle = 'rgb(174,174,174)';ctx.fillText(this.data.tipMsg, this.data.screenWidth / 2, 500);//识别小程序提示;var that = this;ctx.stroke();ctx.draw();},getTempFilePath: function () { //将图片存到临时路径let that=this;let unit = this.data.screenWidth / 375;let ratio = this.data.ratio;wx.canvasToTempFilePath({x: 0,y: 0,width: unit*375,height: unit*540,destWidth: ratio*375,destHeight: ratio*540,canvasId: 'myCanvas',success: function (res) {that.setData({shareImgSrc: res.tempFilePath})if (!res.tempFilePath) {wx.showModal({title: '提示',content: '图片生成中，请稍后重试',showCancel: false,})}wx.getSetting({ //存储照片之前先查看是否有存储权限，如果没有权限，先打开设置权限success(res) {if (res.authSetting['scope.writePhotosAlbum'] == false) {wx.showModal({title: '”HRX抽奖“想访问您的相册0',content: '为了保存图片到您的手机，HRX抽奖需要获取您照片的访问权限, 点击「设置」按钮前往设置',cancelText: '不允许',cancelColor: '#A5A5A8',confirmColor: '#FC652F',confirmText: '设置',success: function (res) { // if (res.confirm) { //点击确定wx.openSetting() //打开设置按钮}},fail: function (res) {},complete: function (res) {}})} else if (res.authSetting['scope.writePhotosAlbum'] == true || JSON.stringify(res.authSetting) == "{}" || res.authSetting['scope.writePhotosAlbum'] == undefined) {that.saveImageToLocal();}}})},fail: function (res) { //图片生成失败}})},//下载图片saveImageToLocal() {let that = this;wx.saveImageToPhotosAlbum({filePath: that.data.shareImgSrc,success(res) {wx.showToast({title: '图片保存成功',icon: 'success',duration: 1800})},fail(res) {}})},doSavecanvasImage() {let that = this;wx.showLoading()if (this.data.timer){clearInterval(this.data.timer)}let timer=setInterval(()=>{if (that.data.count>=3){that.data.timer && clearInterval(that.data.timer)timer && clearInterval(timer)wx.getNetworkType({success(res) {wx.hideLoading()if (workType == "none") {wx.showToast({title: '无网络，图片保存失败',icon: 'none',duration: 2000})} else {that.getTempFilePath();}}})}},500)this.setData({ timer: timer})},getPageData(options) {let that = this;http({url: that.data.getPageData_url,loadingFlag: true,data: {drawActivityId: options.seqId || undefined,validSign: options.validSign || undefined},success(res) {that.setData({user_name: res.data.data.userName,portrait_url: res.data.data.headPicUrl,//头像luck_level: res.data.data.prizeLevel, //获得几等奖luck_name: res.data.data.prizeName,//奖品名称luck_image: res.data.data.prizePicUrl || "/download/zztj-hrx-dmz-prd/9d8fa0c067d13fdd01686b1c05bc0036"//奖品图片})//加载图片到本地function fn1(){return new Promise(function (resolve, reject) {wx.getImageInfo({ //保存头像到本地//src: that.data.portrait_url,success: function (res) {resolve(res)that.setData({portrait_url: res.path,})},fail: function (res) {wx.showModal({title: 'fn1fail',content: JSON.stringify(res),showCancel: false,confirmText: '确定'})reject("catfn1");},complete: function (res) {}})});}function fn2() {return new Promise(function (resolve, reject) {wx.getImageInfo({ //将奖品图片保存到本地src: that.data.luck_image,success: function (res) {resolve(res)that.setData({luck_image: res.path,})},fail: function (res) {reject("catfn2");}})})}function fn3() {return new Promise(function (resolve, reject) {wx.getImageInfo({ //将二维码保存到本地src: that.data.wxAppImage_url,success: function (res) {resolve(res)that.setData({wxAppImage_url: res.path,})},fail: function (res) {reject("catfn3");},complete: function (res) {}})})}Promise.all([fn1(),fn2(),fn3()]).then((data) => {that.drawcancas();})},fail(res) {}})},loadImg1(res) {this.setData({count: this.data.count+1,})},loadImg2 (res) {this.setData({count: this.data.count + 1,})},loadImg3(res) {this.setData({count: this.data.count + 1,})}})
