E企盈营销工具技术服务商 热线:4006-838-530

小程序canvas绘制生成海报

E企盈直播平台营销卖货系统

//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;}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序canvas绘制生成海报
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏