【微信小程序】小程序使用canvas画布生成分享朋友圈的海报-即速应用

先来张效果图吧！

思路：

利用小程序组件canvas放置一个画布，然后再利用布局吧canvas画布隐藏，让其绘制成的图片显示在我们的前端页面上面就可以了，最后在利用API将图片保存到我们手机上面就完成了。

上代码！

wxml:

!-- 画布大小按需定制 这里我按照背景图的尺寸定的  --canvas canvas-id="shareImg" style="width:540px;height:771px"/canvas  !-- 预览区域  --view hidden='{{hidden}}' class='preview'  view class='sherimg_boxs'    image src='{{prurl}}' mode='widthFix'/image    button type='primary' size='mini' bindtap='save'保存图片/button  /view/view

wxss:

canvas{  position: fixed;  top: 0;  left: 4000px;}.share{  position: absolute;  bottom: 100rpx;  width: 70%;  left: 15%;  height: 100rpx;  line-height: 100rpx;}.preview {  width: 100%;  height: 100%;  background: rgba(0,0,0,.9);  position: fixed;  top: 0;  left: 0;  z-index: 2;}.sherimg_boxs{  width: 70%;  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  text-align: center;}.preview image{  width: 100%;  z-index: 3;  border-radius: 24rpx;}.preview button{  margin: 0;  padding: 0;  margin-top: 56rpx;  width:230rpx;  height:78rpx;  background:linear-gradient(90deg,rgba(101,219,153,1) 0%,rgba(111,213,173,1) 100%);  border-radius:48rpx;  font-size:36rpx;  font-weight:500;  color:rgba(255,255,255,1);  text-align: center;  line-height: 78rpx;  border: 0;}

js:

var util = require('../../utils/util.js');var config = require('../../utils/config.js');Page({  /**   * 页面的初始数据   */  data: {    imgSaveBell: false, //图片保存成功开关  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    // 获取分享朋友圈的图片    var pathUrl = 'pages/detail/detail'; //路径是为了传给后台返回对应页面的小程序二维码    var url_3 = config.DOMAIN_API.shareQacode;    //请求内容    var data = {      user_id: app.globalData.uid,      url: pathUrl,    }    util.ajaxPost(url_3, data).then((res) = { //成功处理      console.log(res);      var resUrl = res;      wx.downloadFile({        url: resUrl, //仅为示例，并非真实的资源        success: function (res) {          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容          if (res.statusCode === 200) {            wx.getImageInfo({              src: res.tempFilePath,              success: function (res) {                console.log(res.path) //打印图片的本地路径                that.setData({                  friendImg: res.path                });                that.sening();              }            })          }        }      })          }).catch((errMsg) = { //错误处理，已统一处理，此处可以不需要      console.log(errMsg);    });  },  //分享到朋友圈  goshareFriend: function(e) {    var that = this;    wx.showLoading({      title: '努力生成中...'    })    wx.canvasToTempFilePath({      x: 0,      y: 0,      width: 545,      height: 771,      destWidth: 545,      destHeight: 771,      canvasId: 'shareImg',      success: function(res) {        console.log(res.tempFilePath);        that.setData({          prurl: res.tempFilePath,          hidden: false        })        wx.hideLoading()      },      fail: function(res) {        console.log(res)      }    })  },  //生成分享朋友圈图片  sening: function(e) {    var that = this;    wx.getSystemInfo({      success: function(res) {        console.log(res.windowHeight)        console.log(res.windowWidth)        that.setData({          windowHeight: res.windowHeight,          windowWidth: res.windowWidth        })      },    })    var windowWidth = that.data.windowWidth;    const ctx = wx.createCanvasContext('shareImg')    //主要就是计算好各个图文的位置    //头部绿色图片    let topGreen = '../../images/fenxiang_kapian.png';    ctx.drawImage(topGreen, 0, 0, 540, 215)    //底部白色图片    let botWhite = '../../images/zhongliuyisheng_kapian_baidi.png';    ctx.drawImage(botWhite, 0, 210, 540, 562)    //二维码图片    var qacode = that.data.friendImg;    ctx.drawImage(qacode, 26, 570, 124, 124);    // 设置文字大小    ctx.setTextAlign('center')    ctx.setFontSize(45)    ctx.fillStyle = '#FFFFFF';    var hedetxt = '肿瘤资讯';    // 填充文字    ctx.fillText(hedetxt, 540 / 2, 100)    // 设置文字大小    ctx.setTextAlign('center')    ctx.setFontSize(28)    ctx.fillStyle = '#FFFFFF';    var hedbt = 'ONCOLOGY INFORMATION';    // 填充文字    ctx.fillText(hedbt, 540 / 2, 150)    ctx.setTextAlign('left')    ctx.setFontSize(36)    ctx.fillStyle = '#1F2C3A';    var position = that.data.arr.title;    var chr = position.split(""); //这个方法是将一个字符串分割成字符串数组    var temp = "";    var row = [];    for (var a = 0; a  chr.length; a++) {      if (ctx.measureText(temp).width  windowWidth + 50) {        temp += chr[a];      } else {        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比        row.push(temp);        temp = "";      }    }    row.push(temp);    //如果数组长度大于2 则截取前两个    if (row.length  2) {      var rowCut = row.slice(0, 3);      // 这个参数就可以判断显示几行      var rowPart = rowCut[1];      var test = "";      var empty = [];      for (var a = 0; a  rowPart.length; a++) {        if (ctx.measureText(test).width  windowWidth) {          test += rowPart[a];        } else {          break;        }      }      empty.push(test);      var group = empty[0] //这里只显示两行，超出的用...表示      rowCut.splice(1, 1, group);      row = rowCut;    }    for (var b = 0; b  row.length; b++) {      ctx.fillText(row[b], 26, 320 + b * 50);    }    // 设置文字大小    ctx.setTextAlign('center')    ctx.setFontSize(26)    ctx.fillStyle = '#1F2C3A';    var rtt = '我正在读这篇文章，推荐给你';    // 填充文字    ctx.fillText(rtt, 540 / 2 + 68, 590)    // 设置文字大小    ctx.setFontSize(24)    ctx.fillStyle = '#9DA8B2';    var rct = '长按小程序码，';    // 填充文字    ctx.fillText(rct, 540 / 2 - 20, 650)    // 设置文字大小    ctx.setFontSize(24)    ctx.fillStyle = '#9DA8B2';    var rbl = '进入';    // 填充文字    ctx.fillText(rbl, 540 / 2 - 80, 690)    // 设置文字大小    ctx.setFontSize(24)    ctx.fillStyle = '#61DC98';    var rbc = '医知源肿瘤版';    // 填充文字    ctx.fillText(rbc, 540 / 2 + 20, 690)    // 设置文字大小    ctx.setFontSize(24)    ctx.fillStyle = '#9DA8B2';    var rbr = '查看';    // 填充文字    ctx.fillText(rbr, 540 / 2 + 120, 690)    ctx.draw()  },  save: function() {    var that = this    //生产环境时 记得这里要加入获取相册授权的代码    wx.saveImageToPhotosAlbum({      filePath: that.data.prurl,      success(res) {        wx.showModal({          content: '图片已保存到相册，赶紧晒一下吧~',          showCancel: false,          confirmText: '好哒',          confirmColor: '#61DC98',          success: function(res) {            if (res.confirm) {              console.log('用户点击确定');              that.setData({                hidden: true              });            }          }        })      },      fail: function(err) {        console.log(err);        if (err.errMsg && err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg) { //重新授权弹框确认          wx.showModal({            title: '提示',            content: '需要获取相册访问权限，请到小程序设置页面打开授权',            success(res) {              if (res.confirm) { //重新授权弹框用户点击了确定                wx.openSetting({ //进入小程序授权设置页面                  success(settingdata) {                    console.log(settingdata)                    if (settingdata.authSetting['scope.writePhotosAlbum']) { //用户打开了保存图片授权开关                      wx.saveImageToPhotosAlbum({                        filePath: that.data.prurl,                        success: function(data) {                          that.setData({                            hidden: true                          });                        },                      })                    } else { //用户未打开保存图片到相册的授权开关                      wx.showModal({                        title: '温馨提示',                        content: '授权失败，请稍后重新获取',                        showCancel: false,                      })                    }                  }                })              } else if (res.cancel){                that.setData({                  hidden: true                })              }            },          })        }      }    })  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function() {},  /**   * 生命周期函数--监听页面显示   */  onShow: function() {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function(res) {      }})

总结：

小程序canvas画布之前没做的时候感觉超级难，画的总是不在预想的位置。不过做过一次之后就简单多了，so 简单！哈哈哈哈，定好画布之后开始画图就行，画图所使用的的API链接地址：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arc.html