微信小程序生成图片

矫情吗；* 2021-09-17 01:04 558阅读 0赞

### 又是一波干货~ ###

**.wxml**

**.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][https_blog.yayuanzi.com_23508.html]

[https_blog.yayuanzi.com_23508.html]: https://blog.yayuanzi.com/23508.html