微信小程序把页面做成图片分享

开发微信小程序的时候，经常要遇到如上图这样的，保存小程序二维码图片的分享功能。

网上找了很多都没有具体的写法，于是自己看官方文档写了一个，分享一下。

首先，需要在 wxml 中 创建一个 画板 canvas 。

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，会导致失效。

data :

   data: {
        canvasHidden:true,     //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
        avatarUrl: '',         //用户头像
        nickName: '',          //用户昵称
        wxappName: app.globalData.wxappName,    //小程序名称
        shareImgPath: '',   
        screenWidth: '',       //设备屏幕宽度
        description: app.globalData.description,    //奖品描述
        FilePath:'',           //头像路径
    },

js :

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)
          }
      })

//定义的保存图片方法
saveImageToPhotosAlbum:
  function () {
      wx.showLoading({
          title: '保存中...',
      })
      var that = this;
      //设置画板显示，才能开始绘图
      that.setData({
          canvasHidden: false
      })
      var unit = that.data.screenWidth / 375
      var path1 = "../images/bg3.png"
      var avatarUrl = that.data.avatarUrl
      console.log(avatarUrl + "头像")
      var path2 = "../images/award.png"
      var path3 = "../images/qrcode.png"
      var path4 = "../images/headborder.png"
      var path5 = "../images/border.png"
      var unlight = "../images/unlight.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
                          })
                      }
                  })
              }
          })
      });

  },

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

标题名称：微信小程序把页面做成图片分享
URL链接：/news9/326209.html

成都网站建设公司_创新互联，为您提供静态网站、企业建站、网站排名、关键词优化、响应式网站、网站改版

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联