微信小程序生成图片

又是一波干货~

.wxml

<view class='more' bindtap='saveImageToPhotosAlbum'>保存图片</view>   

<canvas canvas-id='share' style='width:100vw;height:90vh;' hidden='{{canvasHidden}}'></canvas> 

    <!-- //这里的 canvas-id 后面要用的上。 
    //style里的宽高要用上，不设置宽高画板会失效。
    //canvasHidden是控制画板显示隐藏的参数，画板直接设置display none，会导致失效。 -->

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasHidden: true,     //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
    avatarUrl: '',         //用户头像
    nickName: '',          //用户昵称
    wxappName: "生成图片",    //小程序名称
    shareImgPath: '',
    screenWidth: '',       //设备屏幕宽度
    description: "小米8青春版",    //奖品描述
    FilePath: '',           //头像路径
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var userInfo, nickName, avatarUrl
    //获取用户信息，头像，昵称之类的数据
    wx.getUserInfo({
      success: function (res) {
        console.log(res);
        userInfo = res.userInfo
        nickName = userInfo.nickName
        avatarUrl = userInfo.avatarUrl
        that.setData({
          avatarUrl: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName,
        })
        wx.downloadFile({
          url: res.userInfo.avatarUrl
        })
      }
    })
    //获取用户设备信息，屏幕宽度
    wx.getSystemInfo({
      success: res => {
        that.setData({
          screenWidth: res.screenWidth
        })
        console.log(that.data.screenWidth)
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },

  //定义的保存图片方法
  saveImageToPhotosAlbum:
    function () {
      wx.showLoading({
        title: '保存中...',
      })
      var that = this;
      //设置画板显示，才能开始绘图
      that.setData({
        canvasHidden: false
      })
      var unit = that.data.screenWidth / 375
      var path1 = "../../images/1.png"
      var avatarUrl = that.data.avatarUrl
      console.log(avatarUrl + "头像")
      var path2 = "../../images/2.png"
      var path3 = "../../images/3.png"
      var path4 = "../../images/4.png"
      var path5 = "../../images/1.png"
      var unlight = "../../images/2.png"
      var nickName = that.data.nickName
      console.log(nickName + "昵称")
      var context = wx.createCanvasContext('share')
      var description = that.data.description
      var wxappName = "来「 " + that.data.wxappName + " 」试试运气"
      context.drawImage(path1, 0, 0, unit * 375, unit * 462.5)
      //   context.drawImage(path4, unit * 164, unit * 40, unit * 50, unit * 50)
      context.drawImage(path2, unit * 48, unit * 120, unit * 280, unit * 178)
      context.drawImage(path5, unit * 48, unit * 120, unit * 280, unit * 178)
      context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 178, unit * 145, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32)
      context.drawImage(path3, unit * 20, unit * 385, unit * 55, unit * 55)
      //   context.drawImage(path4, 48, 200, 280, 128)
      context.setFontSize(14)
      context.setFillStyle("#999")
      context.fillText("长按识别小程序", unit * 90, unit * 408)
      context.fillText(wxappName, unit * 90, unit * 428)
      //把画板内容绘制成图片，并回调 画板图片路径
      context.draw(false, function () {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: unit * 375,
          height: unit * 462.5,
          destWidth: unit * 375,
          destHeight: unit * 462.5,
          canvasId: 'share',
          success: function (res) {
            that.setData({
              shareImgPath: res.tempFilePath
            })
            if (!res.tempFilePath) {
              wx.showModal({
                title: '提示',
                content: '图片绘制中，请稍后重试',
                showCancel: false
              })
            }
            console.log(that.data.shareImgPath)
            //画板路径保存成功后，调用方法吧图片保存到用户相册
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              //保存成功失败之后，都要隐藏画板，否则影响界面显示。
              success: (res) => {
                console.log(res)
                wx.hideLoading()
                that.setData({
                  canvasHidden: true
                })
              },
              fail: (err) => {
                console.log(err)
                wx.hideLoading()
                that.setData({
                  canvasHidden: true
                })
              }
            })
          }
        })
      });
    },
})

以上代码复制即可看到效果（在.js文件中更改一下图片地址即可）。

相关思路可点击原文链接：https://blog.yayuanzi.com/23508.html