快捷導(dǎo)航

微信小程序如何使用canvas二維碼保存至手機(jī)相冊(cè)

更新時(shí)間：2019年07月15日 08:35:00 作者：咸土豆

這篇文章主要介紹了微信小程序如何使用canvas二維碼保存至手機(jī)相冊(cè)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在使用canvas繪制海報(bào)的過(guò)程中不建議使用原生來(lái)進(jìn)行畫圖，因?yàn)槟J(rèn)是不支持rpx像素的，px不會(huì)做到自適應(yīng)。

推薦使用插件 Painter

github地址

github.com/Kujiale-Mob （本地下載）…

配置很簡(jiǎn)單，也容易上手，無(wú)論是畫矩形，還是將圖片合成canvas；還是自己定義文字；都是很方便的。

附上一個(gè)簡(jiǎn)單的例子吧

 <painter :customStyle="customStyle" :palette="imgDraw" />

//
 const _this=this;
   wx.getSystemInfo({
    success (res) {
     _this.drawCanvas(res.windowHeight);
    }
   })
	 
drawCanvas(height) {
//這里的canvas的高是動(dòng)態(tài)獲取設(shè)備的高度，做到自適應(yīng)
    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
     // });
    }
   });
  },

這里涉及到畫二維碼，如果你的二維碼圖片不是一個(gè)線上的鏈接的話，這時(shí)需要做一些小操作。

我的項(xiàng)目中二維碼的圖片傳過(guò)來(lái)是一個(gè)流，所以用img的src默認(rèn)發(fā)送get請(qǐng)求，就能拿到這個(gè)圖片了。

所以u(píng)rl會(huì)直接發(fā)送get請(qǐng)求拿到圖片。

canvas的層級(jí)

canvas的層級(jí)是最高的，底部的分享塊會(huì)被遮住，這時(shí)你需要用兩套方案，一個(gè)是純展示用的，用正常的html來(lái)寫，給用戶看這個(gè)名片。

下載或分享的時(shí)候再y用canvas生產(chǎn)你想要圖片，接著調(diào)用微信的保存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
  // });
 }
});

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: