//INDEX.WXML!-- 第一种仅仅生成二维码并展示 --!-- view class='cont' id='canvas-container' image src='data:image/png;base64,{{codeimg}}' style='width:300rpx;height:300rpx;top:20%;position:relative;z-index:9;'/image/view --!-- 第二种生成海报二维码并保存到相册 --view class='cont' id='canvas-container' canvas canvas-id="myCanvas" style="width:100%;height:100%;" bindlongtap='saveShareImg' //view
//INDEX.JS//index.js//获取应用实例const app = getApp()Page({ data: { // 第一种仅仅显示生成二维码 codeimg: "", // 默认虚拟数据 cardBase: { //需要https图片路径,下载到本地然后去绘制 cardbg: "https://7265-redux-32ab9a-1259022487.tcb.qcloud.la/image/222.jpg", // 二维码 codeImg: "https://7265-redux-32ab9a-1259022487.tcb.qcloud.la/image/111.png", } }, onLoad: function() { var that = this; /** * @paeam[第一种仅需要实现生成小程序码/二维码并展示] * #1#第一步获取token * https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=小程序appid&secret=你的小程序秘钥 * #2#第二步获取小程序二维码https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' +"通过第一步获取到的token" * wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=小程序appid&secret=你的小程序秘钥', header: { }, method: 'GET', dataType: 'json', responseType: 'text', success: function(res) { // 这里获取到你的token var token = res.data.access_token; // 官方提供三个接口 A生成小程序码数量受限 B生成小程序码不受限 C生成小程序二维码 数量受限 // 通过token请求小程序api生成小程序二维码/小程序码 if (token) { wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + token, method: 'post', header:{ "Content-Type":"application/json" }, data: { "path": "pages/index/index", "width": 430 }, responseType:'arraybuffer', success: function(res) { // 获取到小程序码转化编码格式 var url = wx.arrayBufferToBase64(res.data) console.info(res.data); that.setData({ codeimg: url }) }, fail: function(res) {}, complete: function(res) {}, }) } }, fail: function(res) {}, complete: function(res) {}, }) * * * */ // #2#这里如果需要生成海报,二维码需要网络路径,只能请求后台接口获取到二维码并展示处理 // wx.request({ // url: "请求后台接口获取到二维码", // method: 'post', // header: { // "content-type": "application/x-www-form-urlencoded" // }, // dataType: 'json', // responseType: 'text', // success: function(res) { // console.info("获取二维码===", res.data.data.uri); // if (res.data) { // that.data.cardBase.qrCode = res.data.data.uri; // that.setData({ // cardBase: that.data.cardBase // }) // that.getCanvas(); // } // }, // fail: function(res) { // wx.showToast({ // title: res.data.errMsg, // icon: 'none', // duration: 2000, // mask: true, // success: function(res) {}, // fail: function(res) {}, // complete: function(res) {}, // }) // }, // complete: function(res) {}, // }) // return; var cardBase=that.data.cardBase; that.getCanvas(cardBase.cardbg, cardBase.codeImg); }, /** * 先下载海报背景 */ getAvaterInfo: function() { wx.showLoading({ title: '生成中...', mask: true, }); var that = this; wx.downloadFile({ url: that.data.cardBase.cardbg, success: function(res) { wx.hideLoading(); if (res.statusCode === 200) { //download下载成功返回结果res.tempFilePath var cardbg = res.tempFilePath; that.getQrCode(cardbg); } else { wx.showToast({ title: '亲,海报下载失败！', icon: 'none', duration: 2000, success: function() { var cardbg = ""; that.getQrCode(cardbg); } }) } } }) }, /** * 下载二维码图片 */ getQrCode: function (cardbg) { wx.showLoading({ title: '生成中...', mask: true, }); var that = this; wx.downloadFile({ url: that.data.cardInfo.codeImg, success: function(res) { wx.hideLoading(); if (res.statusCode === 200) { var codeImg = res.tempFilePath; that.getCanvas(cardbg, codeImg); } else { wx.showToast({ title: '二维码下载失败！', icon: 'none', duration: 2000, success: function() { var codeImg = ""; that.getCanvas(cardbg, codeImg); } }) } } }) }, /** * 开始用canvas绘制分享海报 * @param cardbg 下载的海报背景图路径 * @param codeImg 下载的二维码图片路径 */ getCanvas: function (cardbg, codeImg) { wx.showLoading({ title: '正在生成中...', mask: true, }) var that = this; var cardBase = that.data.cardBase; //需要绘制的数据集合 const ctx = wx.createCanvasContext('myCanvas'); //创建画布 var width = ""; wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect) { var height = rect.height; var right = rect.right; width = rect.width * 0.8; var left = rect.left + 5; ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, rect.width, height); // 这里处理自适应 let rpx = 1; wx.getSystemInfo({ success(res) { rpx = res.windowWidth / 375; }, }) //背景图 if (cardbg) { ctx.drawImage(cardbg, 20*rpx,20*rpx, 260*rpx,460*rpx); } // 标题 ctx.setFontSize(14); ctx.setFillStyle('#000'); ctx.setTextAlign('left'); ctx.fillText("菜鸟老五", 35 * rpx, 355 * rpx, 100 * rpx, 100 * rpx); //姓名 // 标题 ctx.setFontSize(15); ctx.setFillStyle('#000'); ctx.setTextAlign('left'); ctx.fillText("前端/小程序开发", 35 * rpx, 385 * rpx, 100 * rpx, 100 * rpx); //姓名 // 标题 ctx.setFontSize(15); ctx.setFillStyle('#000'); ctx.setTextAlign('left'); ctx.fillText("微信号:qq287534291", 35 * rpx, 415 * rpx, 100 * rpx, 100 * rpx); //姓名 // 绘制二维码 if (codeImg) { ctx.drawImage(codeImg, 165 * rpx, 320 * rpx, 100 * rpx, 100 * rpx) } }).exec() setTimeout(function() { ctx.draw(); wx.hideLoading(); }, 1000) }, //点击保存到相册 saveShareImg: function() { var that = this; wx.showLoading({ title: '正在保存', mask: true, }) setTimeout(function() { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function(res) { console.info("res", res); wx.hideLoading(); var tempFilePath = res.tempFilePath; wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { console.info(res); wx.showModal({ content: '图片已保存到相册，赶紧晒一下吧~', showCancel: false, confirmText: '好的', confirmColor: '#333', success: function(res) { if (res.confirm) {} }, fail: function(res) {} }) }, fail: function(res) { console.log(res) if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") { console.log("打开设置窗口"); wx.openSetting({ success(settingdata) { console.log(settingdata) if (settingdata.authSetting["scope.writePhotosAlbum"]) { console.log("获取权限成功，再次点击图片保存到相册") } else { console.log("获取权限失败") } } }) } } }) } }); }, 1000); },})
//INDEX.WXSSpage { background-color: #edeef2;}.cont { width: 80%; margin: auto; text-align: center; height: 1000rpx; margin-top: 50rpx; background:#ff8427; box-shadow:0rpx 0rpx 10rpx 5rpx rgb(100, 80, 204);}.savePoste { background-color: #ff8427; width: 90%; margin-left: auto; margin-right: auto; margin-top: 30rpx; color: #fff;}.saveTitle { font-size: 25rpx; color: #666; width: 90%; margin-left: auto; margin-right: auto; margin-top: 20rpx; text-align: center;}
