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怎么实现虎年头像框制作小程序”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。