阿裏雲學生服務器 低至10元一月

需求：

點邀請按鈕後，請求接口拿到(dào)base64格式的(de)二維碼，生成圖片并且支持長按保存。

工具：

使用小程序wx.canvasToTempFilePath，以(yǐ)及wx.getFileSystemManager、wx.canvasToTempFilePath

html：需要(yào / yāo)實現長按保存，所以(yǐ)加了(le／liǎo)一個(gè)圖片，透明度設置爲(wéi / wèi)0。并且開啓長按保存功能（小程序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">長按可保存圖片到(dào)系統相冊哦～</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需要(yào / yāo)執行drawShareCanvas函數

 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()
            // 下一步？=> 保存圖片到(dào)相冊
            setTimeout(() => {
              self.saveAlbum()
            }, 200)
            tip.toast('長按可保存到(dào)系統相冊哦～', '', 'none');
          },
          fail () {
            wx.showToast({
              title: '生成失敗',
              icon: 'none'
            })
          }
        })
      }

這(zhè)個(gè)函數會從canvas轉爲(wéi / wèi)圖片

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

這(zhè)個(gè)函數将base64轉爲(wéi / wèi)網絡圖片

// 将base64圖片轉網絡圖片
      getBasetoImg(code) {
        /* code是(shì)指圖片base64格式數據 */
        // 聲明文件系統
        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()
            }
          });
        })
      },

開發小程序過程中遇到(dào)問題，請參考：http://vonasort.com/4j8W