小程序分享自己的二维码 保存到相册

wxml的代码 重要的就一个 canvas-id

  <view class="zhezao" hidden="{{flag}}">
        <view class="t_w">

            <!--右上角图标开始-->
            <view class="t_image" bindtap="conceal">
                <image class="t_image1" src="/images/jiajia.png"></image>
            </view>
            <!--右上角图标结束-->

            <!--弹出框开始-->
            <view class="tanchu_view">
                
                    <canvas canvas-id="hoCanvas" id="imgId" style="width:100%;height:{{windowHeight*0.85}}px;"></canvas>

                    保存图片
                </button> -->
                <view class="kuang">
                <view class="baocunImg"  bind:tap="saveImageToAlbum">保存图片</view>
                </view>
            </view>
            <!--弹出框结束-->
        </view>
    </view>

然后是 js处理点击生成图片按钮之后的操作 我后台用的是thinkphp

  //生成分享图片
  fenxiang: function (e) {
  
    wx.showLoading({
      title: '生成海报中...',
    })
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
    var surl = "pages/details/details?index=" + this.data.index
    var headimgurl = this.data.tmphead
    var nickname = this.data.list.nickname
    loginModel.getToken(surl)
      .then(res => {
        /* 图片获取成功才执行后续代码 */
        var canvas = wx.createCanvasContext('hoCanvas')
        that.setData({
          canvas:canvas
        })
 
        // canvas.clearRect(100, 100, 150, 75)
        
        var fsm = wx.getFileSystemManager(), //文件管理器
          FILE_BASE_NAME = 'tmp_base64src', //文件名
          format = 'png', //文件后缀
          base64Str = res.data
        var buffer = wx.base64ToArrayBuffer(base64Str), //base 转二进制
          filePath = `${wx.env.USER_DATA_PATH}/www.${format}`; //文件名

        const width = wx.getSystemInfoSync().windowWidth
        const height = wx.getSystemInfoSync().windowHeight

        fsm.writeFile({ //写文件
          filePath,
          data: buffer,
          encoding: 'binary',
          success(res) {
            wx.getImageInfo({ //读取图片
              src: filePath,
              success: function (res) {
                // 绘制背景图
                canvas.drawImage('/images/444.jpg', that.data.windowWidth * 0.025, 5, that.data.windowWidth * 0.95, that.data.windowHeight * 0.85);
                // 绘制头像
                canvas.drawImage(headimgurl, (that.data.windowWidth - 60) / 2., 40, 60, 60);
                //标题 换行显示
                if (that.data.list.title.length.length > 50) {
                  var title = that.data.list.title.length.substring(0, 50) + '...'
                } else {
                  var title = that.data.list.title
                }
                var chr = title.split("");
                var temp = "";
                var row = [];
                var w = that.data.windowWidth * 0.6; //文字的宽度
                canvas.font = "18px Arial";
                canvas.fillStyle = "black";
                canvas.textBaseline = "middle";

                for (var a = 0; a < chr.length; a++) {
                  if (canvas.measureText(temp).width < w) {
                    ;
                  } else {
                    row.push(temp);
                    temp = "";
                  }
                  temp += chr[a];
                }

                row.push(temp);
                var x = that.data.windowWidth * 0.2
                var y = 120
                for (var b = 0; b < row.length; b++) {
                  canvas.fillText(row[b], x, y + (b + 1) * 30);
                }

                //不同类型 添加的数据不同
                that.DifferentType(canvas)

                //二维码
                canvas.drawImage(res.path, (that.data.windowWidth - that.data.windowWidth * 0.2) / 2, that.data.windowHeight - 240, that.data.windowWidth * 0.2, that.data.windowWidth * 0.2) 
     

                // // 底部描述
                canvas.setFontSize(18)
                canvas.setFillStyle("#424E75")
                canvas.setStrokeStyle('#424E75')
                // canvas.textAlign = 'center';
                const baoxianjie = '保险街'
                canvas.fillText(baoxianjie, (that.data.windowWidth - canvas.measureText(baoxianjie).width) / 2 , that.data.windowHeight - 140)
              

                //绘制微信昵称文本  居中的放到最后设置
                canvas.setFontSize(20)
                canvas.setFillStyle("#424E75")
                canvas.setStrokeStyle('#424E75')
                // canvas.textAlign = 'center';
                // canvas.fillText(nickname, 0, 115)
                canvas.fillText(nickname, (that.data.windowWidth - canvas.measureText(nickname).width ) / 2, 115)
                // console.log("微信昵称长度"+ nickname.length)
                // console.log(canvas.measureText(nickname).width)

                canvas.draw()

                setTimeout(function () {
                  wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 632,
                    height: 970,
                    destWidth: 632,
                    destHeight: 970,
                    canvasId: 'hoCanvas',
                    success: function (res) {
                      console.log(res.tempFilePath)
                      that.setData({
                        postUrl: res.tempFilePath,
                      })
                      // that.saveImageToAlbum();
                      wx.hideLoading()
                    },
                    fail: function (res) {}
                  })
                }, 500)
              },
              error(res) {
                console.log(res)
              }
            })
          }
        })

      })
  },

 

首先强调一点 小程序分享照片中的二维码需要

 

有点多 有点乱没来得及整理 一步一步说

loginModel.getToken(surl) 这个函数是自己封装的 去后台请求二维码的  中间隔了一层不写了 直接写后台的函数

 /**
     * 直接返回二维码图片
    */
    public function codeImg()
    {

        $param = Request::instance()->param();
        $path = $param['url'];
        $token = $this->getToken();
        $url = "https://api.weixin.qq.com/wxa/getwxacode?access_token=" . $token;
        $data = ["path" => $path , "width" =>430];
        $tmpdata = json_encode($data);
        
        $res = $this->CurlRequest($url , $tmpdata);
        return base64_encode ($res);
    }

然后返回到小程序端 是一个base64 的东西 

然后运行 这一块的代码   接下来是这个函数  fsm.writeFile({ //写文件 得到的res.path 就是二维码的路径 

 

 

还有一个问题就是无法使用小程序路径的头像 需要下载

还有一个问题就是无法使用小程序路径的头像 需要下载

还有一个问题就是无法使用小程序路径的头像 需要下载

我的处理方法是 跳转到这个页面 直接去请求头像 不管分享不分享 

  // 请求头像地址 
  get_img: function (wid) {
    var that = this
    loginModel.headimg(wid)
      .then(res => {
        console.log(res)
        wx.downloadFile({
          url: String (res.data), 
          success: (result) => {
            that.setData({
              tmphead:result.tempFilePath
            })
          }
        })
      })
  },

是需要下载到临时文件里边的 不然头像是显示不出来的

大概的流程就是这样的 有什么疑问随时问 

然后附上 效果图 虽然我觉得很丑