Android怎么實現虎年頭像框制作小程序

本文小編為大家詳細介紹“Android怎么實現虎年頭像框制作小程序”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Android怎么實現虎年頭像框制作小程序”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1、實現原理

通過效果圖可以看到，在這個地方用到了兩張圖片：

一張是通過“獲取頭像”按鈕獲取的微信用戶的頭像，用作底圖；

另外一張是相框圖片，這是預制的靜態資源；

在點擊“保存頭像”的時候，將上面兩張圖片分別通過canvas畫到畫板上，先畫底圖，在畫相框圖，繪制完成后將畫板上的圖片保存到本地就完事了。

下面開始介紹具體的實現步驟。

2、收集靜態資源

在我這個小程序中內置了一些靜態資源，比如：頭像框圖片、首頁背景圖片、底部導航欄圖標等。

3、編碼

分為三個部分介紹編碼這個階段。

3.1 獲取微信用戶頭像

微信小程序提供有api獲取微信用戶信息。 wx.getUserProfile(Object object)

通過button按鈕點擊，獲取微信用戶信息：

<button bindtap="getUserProfile" class="btn1">獲取頭像</button>

getUserProfile實現如下：

    // 推薦使用wx.getUserProfile獲取用戶信息，開發者每次通過該接口獲取用戶個人信息均需用戶確認
    getUserProfile(e) {
      let that = this;
      wx.getUserProfile({
          desc: '僅用于生成頭像使用', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
          success: (res) => {
            //獲取高清用戶頭像
            let url = res.userInfo.avatarUrl;
            while (!isNaN(parseInt(url.substring(url.length - 1, url.length)))) {
              url = url.substring(0, url.length - 1)
            }
            url = url.substring(0, url.length - 1) + "/0";
            res.userInfo.avatarUrl = url;
            that.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        });
    },

到這里獲取微信用戶頭像已經完成。

備注： 通過res.userInfo默認返回來的用戶頭像是低分辨率的，要獲取用戶頭像高清圖需要進行處理。

3.2 繪制圖像

繪制圖主要用到了微信小程序提供畫布相關API

變量說明：

hotArr:[{name:'虎年相框',key:'hunian'},{name:'虎頭帽子',key:'shendan'},{name:'國旗',key:'guoqing'}],

curHot：用于存放當前選擇的hotArr的索引。

windowWidth:  wx.getSystemInfoSync().windowWidth

size: 260; //自定義的大小

pc : wx.createCanvasContext('myCanvas');

drawImg(){
      wx.showLoading({
        title: '生成頭像中...',
      })
      let that = this;
      let type = this.data.hotArr[this.data.curHot].key;
      let promise1 = new Promise(function(resolve, reject) {
        wx.getImageInfo({
          src: that.data.userInfo.avatarUrl,
          success: function(res) {
            resolve(res);
          }
        })
      });
      var index = that.data.defaultImg;
      let promise2 = new Promise(function(resolve, reject) {
        wx.getImageInfo({
          src: `../../images/${type}/hat${index}.png`,
          success: function(res) {
            resolve(res);
          }
        })
      });
      Promise.all([
        promise1, promise2
      ]).then(res => {
        //主要就是計算好各個圖文的位置
        pc.clearRect(0, 0, windowWidth, size);
        //繪制背景圖
        pc.drawImage(res[0].path, windowWidth/2-130, 0, size, size)
        //繪制相框圖
        pc.drawImage('../../' + res[1].path, windowWidth/2-130, 0, size, size)
        pc.stroke()
        pc.draw(false, () => {
            //圖片繪制成功回調,調用保存canvas方法
            this.canvasToTempFile();
        })
      })
    },

wx.getImageInfo() 主要用于獲取圖片的信息,返回圖片的本地路徑；

這個地方主要是因為drawImage() 只支持繪制本地圖片。

3.3 保存圖像

在上一步我們已經將兩張圖片繪制到畫布上面了，下面將畫布上的內容保存到本地。

保存畫布上的內容到本地相冊也分為兩步。

第一步：把當前畫布指定區域的內容導出生成指定大小的圖片。

通過使用 wx.canvasToTempFilePath()

第二步：將保存圖片本地相冊。

通過使用 wx.saveImageToPhotosAlbum（https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html）

 canvasToTempFile(){
    wx.canvasToTempFilePath({
      x: windowWidth/2-130,  //這個地方減去130是因為我們的圖片尺寸設置的是260
      y: 0,
      height: size,
      width: size,
      canvasId: 'myCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: '圖片已保存到相冊,請前往微信去設置喲!',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用戶點擊確定');
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

到這里也就實現了基本的頭像框功能。

讀到這里，這篇“Android怎么實現虎年頭像框制作小程序”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。