阿里云學(xué)生服務(wù)器 低至10元一月

需求：

點(diǎn)邀請(qǐng)按鈕后，請(qǐng)求接口拿到base64格式的二維碼，生成圖片并且支持長(zhǎng)按保存。

工具：

使用小程序wx.canvasToTempFilePath，以及wx.getFileSystemManager、wx.canvasToTempFilePath

html：需要實(shí)現(xiàn)長(zhǎng)按保存，所以加了一個(gè)圖片，透明度設(shè)置為0。并且開啟長(zhǎng)按保存功能（小程序image屬性）

 <div class="inviteshare" >
    <canvas canvas-id="shareCanvas" class="inviteshare-canvas" style="width:750rpx;height:1074rpx"></canvas>
    <img show-menu-by-longpress v-if="canvasIMG" :src="canvasIMG" class="inviteshare-img"/>
    <p class="inviteshare-text">長(zhǎng)按可保存圖片到系統(tǒng)相冊(cè)哦～</p>
  </div>

css：

page{
    background: #FFFAF1;
  }
  
  .inviteshare{
    &-inviteshare{
      display: block;
      margin: 0 auto;
    }
    &-text{
      font-size: 28rpx;
      font-weight: 400;
      color: #FFA970;
      text-align: center;
      margin-top: 32rpx;
    }
    &-img{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 100%;
      opacity: 0;
      z-index: 1;
      height: 1074rpx;
    }
  }

js：onshow需要執(zhí)行drawShareCanvas函數(shù)

 drawShareCanvas: function () {
        let self = this;
        var rpx = 1
        wx.getSystemInfo({
          success (res) {
            rpx = res.windowWidth / 375
          }
        })
        wx.getImageInfo({
          src: self.tempFilePaths,
          success (res) {
            // 隱藏背景圖loading
            wx.hideLoading()
            const ctx = wx.createCanvasContext('shareCanvas')
            // 繪制背景圖
            ctx.scale(0.5, 0.5)
            ctx.drawImage(self.tempFilePaths, 0, 0, 750 * rpx, 1074 * rpx)

            // 小程序碼
            const qrImgSize = 200 * rpx
            ctx.drawImage(self.codeImg, 275 * rpx, 609 * rpx, qrImgSize, qrImgSize)

            ctx.stroke()
            // 繪制其它
            ctx.draw()
            // 下一步？=> 保存圖片到相冊(cè)
            setTimeout(() => {
              self.saveAlbum()
            }, 200)
            tip.toast('長(zhǎng)按可保存到系統(tǒng)相冊(cè)哦～', '', 'none');
          },
          fail () {
            wx.showToast({
              title: '生成失敗',
              icon: 'none'
            })
          }
        })
      }

這個(gè)函數(shù)會(huì)從canvas轉(zhuǎn)為圖片

saveAlbum() {
        var that = this
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          canvasId: 'shareCanvas',
          success: function (res) {
            that.canvasIMG = res.tempFilePath
          },
          fail(err) {
            console.log(err)
          }
        }, that)
      },

這個(gè)函數(shù)將base64轉(zhuǎn)為網(wǎng)絡(luò)圖片

// 將base64圖片轉(zhuǎn)網(wǎng)絡(luò)圖片
      getBasetoImg(code) {
        /* code是指圖片base64格式數(shù)據(jù) */
        // 聲明文件系統(tǒng)
        return new Promise((resolve, reject) => {
          const fs = wx.getFileSystemManager();
          const FILE_BASE_NAME = 'tmp_base64src'; // 自定義文件名
          const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(code) || [];
          if (!format) {
            return (new Error('ERROR_BASE64SRC_PARSE'));
          }
          const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
          const buffer = wx.base64ToArrayBuffer(bodyData);
          fs.writeFile({
            filePath,
            data: buffer,
            encoding: 'binary',
            success() {
              resolve(filePath);
            },
            fail() {
              reject()
            }
          });
        })
      },

開發(fā)小程序過程中遇到問題，請(qǐng)參考：http://vonasort.com/4j8W