小程序使用canvas二維碼保存至手機相冊

小程序使用canvas二維碼保存至手機相冊

在使用canvas繪製海報的過程當中不建議使用原生來進行畫圖，由於默認是不支持rpx像素的，px不會作到自適應。

推薦使用插件 Painter

github地址 github.com/Kujiale-Mob…

配置很簡單，也容易上手，不管是畫矩形，仍是將圖片合成canvas；仍是本身定義文字；都是很方便的。

附上一個簡單的例子吧

<painter :customStyle="customStyle" :palette="imgDraw" />
複製代碼

//
  const _this=this;
      wx.getSystemInfo({
        success (res) {
          _this.drawCanvas(res.windowHeight);
        }
      })
	  
drawCanvas(height) {
//這裏的canvas的高是動態獲取設備的高度，作到自適應
       const that = this;
      let heightVal=height*2+'rpx';
      this.imgDraw = {
        width: '750rpx',
        height: heightVal,
        background: '#fff',
        views: [
          {
            type: "rect",
            css: {
              top: '20rpx',
              left: '130rpx',
              color: '#1A1A1A',
              width: '660rpx',
              height: '220rpx',
              borderRadius: '32rpx'
            }
          },
          {
            type: 'image',
            url: './a.jpg',
            css: {
              top: '36rpx',
              left: '16rpx',
              width: '188rpx',
              height: '188rpx'
            }
          },
          {
            type: 'text',
            text: '',
            css: {
              top: '54rpx',
              left: '260rpx',
              fontSize: '48rpx',
              color: "#fff"
            }
          },
          {
            type: 'text',
            text: '文字部分',
            css: {
              top: '134rpx',
              left: '260rpx',
              fontSize: '30rpx',
              color: "#d1d1d1"
            }
          },
          {
            type: 'text',
            text: '1333333333',
            css: {
              top: '196rpx',
              left: '260rpx',
              fontSize: '26rpx',
              color: "#d1d1d1"
            }
          },
          {
            type: 'text',
            text: '李四',
            css: {
              top: '304rpx',
              left: '302rpx',
              fontSize: '24rpx',
              color: "#767676"
            }
          },
          {
            type: 'image',
            url: '/icon-localtion.png',
            css: {
              top: '275rpx',
              left: '260rpx',
              width: '26rpx',
              height: '168rpx'
            }
          },
          {
            type: 'image',
            url: '二維碼.png',
            css: {
              top: '646rpx',
              left: '236rpx',
              width: '278rpx',
              height: '278rpx'
            }
          }
        ]
      }

    
      let { path: __path } = mpvue.getStorageSync('createImagePath')
      mpvue.saveImageToPhotosAlbum({
        filePath: __path,
        success(res) {
          // mpvue.showToast({
          // title: '保存成功',
          // icon: 'success',
          // duration: 800,
          // mask: true
          // });
      
        },
        fail(res) {
          // mpvue.showToast({
          // title: '保存失敗',
          // icon: 'fail',
          // duration: 800,
          // mask: true
          // });
        }
      });
    },
	
複製代碼

這裏涉及到畫二維碼， 若是你的二維碼圖片不是一個線上的連接的話，這時須要作一些小操做。

個人項目中二維碼的圖片傳過來是一個流，因此用img的src默認發送get請求，就能拿到這個圖片了。 因此url會直接發送get請求拿到圖片。

canvas的層級

canvas的層級是最高的，底部的分享塊會被遮住，這時你須要用兩套方案，一個是純展現用的，用正常的html來寫，給用戶看這個名片。 下載或分享的時候再y用canvas生產你想要圖片，接着調用微信的保存api，將圖片下載或分享。

let { path: __path } = mpvue.getStorageSync('createImagePath')
mpvue.saveImageToPhotosAlbum({
  filePath: __path,
  success(res) {
    // mpvue.showToast({
    // title: '保存成功',
    // icon: 'success',
    // duration: 800,
    // mask: true
    // });

  },
  fail(res) {
    // mpvue.showToast({
    // title: '保存失敗',
    // icon: 'fail',
    // duration: 800,
    // mask: true
    // });
  }
});
複製代碼

此時就能順利完成保存名片的功能了。