微信小程序之通过Canvas生成图片保存到手机相册

需求描述：

电商项目中有很多需要分享邀请的海报页面，需要带上自己的小程序码，并且保存在本地，然后分享到朋友圈。

解决方法：

将海报通过wx.createCanvasContext绘制到画布canvas组件。
使用canvasToTempFilePath将canvas海报保存到本地临时文件路径。
使用savelmageToPhotosAlbum将图片保存到本地相册。

定义海报内容图片

data: {isGetSet: true,poster_bg: '/images/invite_poster_bg.png',poster_qrcode: '/images/invite_poster_qrcode.png'
},

将海报通过wx.createCanvasContext绘制到画布canvas组件。

1.在wxml中添加canvas组件。

<canvas class='canvas-poster' canvas-id='canvasposter'></canvas>

2.绘制海报内容

drawPoster: function() {if(drawing){wx.showToast({title: '绘制中……',icon: 'loading',duration: 3000}) }else{drawing = true;// loading console.log('进入绘制')var ctx = wx.createCanvasContext('canvasposter');// ctx.clearRect(0, 0, 280, 450);/* 绘制背景*/ctx.rect(0, 0, 730, 1300);ctx.setFillStyle('black');ctx.fillRect(0, 0, 730, 1300);/*绘制产品图*/ctx.drawImage(this.data.poster_bg, 0, 0, 730, 1300);/*绘制二维码*/ctx.drawImage(this.data.poster_qrcode, 265, 725, 200, 200);ctx.restore();ctx.draw(false, this.getTempFilePath);}},

使用canvasToTemprilePath将canvas海报保存到本地临时文件路径;

getTempFilePath: function() {wx.canvasToTempFilePath({canvasId: 'canvasposter',success: (res) => {this.saveImageToPhotosAlbum(res.tempFilePath)}})
},

使用savelmageToPhotosAlbum将图片保存到本地相册

saveImageToPhotosAlbum: function(imgUrl) {if (imgUrl) {      wx.saveImageToPhotosAlbum({filePath: imgUrl,success: (res) => {console.log(res)wx.showToast({title: '保存成功',icon: 'success',duration: 3000})drawing = false},fail: (err) => {console.log(err)wx.showToast({title: '保存失败',icon: 'error',duration: 3000})drawing = false}})} else {wx.showToast({title: '绘制中……',icon: 'loading',duration: 3000})}
},

点击按钮保存海报到手机相册（判断是否获取相册授权，已获得权限直接绘制，若未获得权限，重新生成一个按钮点击需要用户重新授权）

saveImageToPhotos: function(e) {let that = this// 相册授权wx.getSetting({success(res) {// 进行授权检测，未授权则进行弹层授权console.log(res.authSetting)if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success () {that.drawPoster();that.setData({isGetSet: true})},// 拒绝授权时，在下载按钮上面增加打开手机设置按钮fail() {console.log('拒绝授权')that.setData({isGetSet: false})}})} else {// 已授权则直接进行保存图片that.setData({isGetSet: true})that.drawPoster();}},fail(res) {console.log(res);}})
},

到此，一个动态生成带有小程序码的海报下载流程就完成了。

完整案例

微信小程序之通过Canvas生成图片保存到手机相册相关推荐

微信小程序将base64图片格式保存至手机相册
// 保存图片 let settingWritePhotosAlbum = false; export const saveImg = function(url, callback ) {//获取文件 ...
微信小程序：使用canvas 生成图片并分享
废话不多说直接上代码!!!! html <canvas canvas-id="positionPoster" style="width: 414px; height ...
微信小程序下载图片或视频保存到手机系统相册
//downloadSaveFile.js/*** 下载单个文件* @param {string} [type]* @param {string} url* @callback successCall ...
【微信小程序】将base64图片保存至本地
需求描述微信小程序中,下载一个报告文件,直接可获取到的是报告图片的base64格式. 参考文章 1.微信小程序实现图片下载功能 2.微信小程序把base64的图片保存到手机相册代码实现 1.wxm ...
微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)
微信小程序之使用canvas给微信头像加小红旗情境:新中国成立70周年,普天同庆.昨天看到朋友圈中被刷屏的@官方微信给自己的头像加小红旗.服务器被卡爆,很多朋友说换头像不成功. 任务:打算自己写一 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...
微信小程序---判断苹果11及以上型号手机
微信小程序-判断苹果11及以上型号手机在app,js全局中 onLaunch: function () {var t = this;wx.getSystemInfo({success: functi ...
微信小程序，使用canvas画图生成海报并保存手机相册
需求:需要根据背景图片和用户的微信的头像和昵称,生成一张海报图,并保存到手机相册. 首先在画布上绘制海报背景图片,然后再绘制头像.昵称和挑战成功的信息. 代码如下: getImageInfo() {r ...