호랑이 해를 맞아 아바타 프레임을 만들기 위한 작은 프로그램을 단계별로 구현해 보세요(연습)

호랑이 해의 봄 축제가 곧 다가옵니다. 호랑이 해 아바타 프레임을 사진에 추가하는 방법 다음 기사에서는 이 기능을 구현하는 작은 프로그램을 만드는 방법을 보여 드리겠습니다. 당신에게 도움이 됩니다!

한 해의 끝이군요. 시간이 참 빨리 지나가는 것 같아요. 한 해가 눈 깜짝할 사이에 지나가네요.

작년에 전염병으로 인해 새해를 축하하기 위해 집에 가지 못했던 기억이 납니다. 섣달 그믐 날 밤, 가족 위챗 그룹에 게임을 하면서 빨간 봉투를 받기 위한 작은 프로그램을 올렸습니다. 또한 매우 기뻤습니다.

직접 미니게임을 개발한 적은 없지만 최근에는 새해를 맞아 아바타를 바꾸는 친구들을 많이 보았습니다. 다음과 같습니다.

살펴보니 크게 사진 + 사진 프레임 두 부분으로 구성되어 있고 오버레이를 하나의 사진으로 저장하면 하나를 구현할 수도 있습니다.

이 기사는 직접 만든 호랑이 해 아바타 프레임 애플릿입니다.

구현

더 이상 고민하지 말고 렌더링부터 시작해 보겠습니다.

1. 구현 원칙

여기에서 두 장의 사진이 사용된 것을 렌더링에서 볼 수 있습니다.

하나는 "아바타 가져오기" 버튼을 통해 얻은 WeChat 사용자의 아바타입니다.

다른 하나는 사전 제작된 정적 리소스인 액자 사진입니다.

"아바타 저장"을 클릭하면 위의 두 그림을 캔버스를 통해 화판에 그린 다음, 먼저 기본 지도를 그립니다. 그런 다음 액자를 그리고 그림이 완성된 후 로컬에 그림판에 그림을 저장하면 끝입니다.

구체적인 구현 단계는 아래에 소개됩니다.

2. 정적 리소스 수집

이 작은 프로그램에는 아바타 프레임 사진, 홈페이지 배경 사진, 하단 탐색 모음 아이콘 등과 같은 몇 가지 정적 리소스가 내장되어 있습니다.

이 사진은 다음 웹사이트에서 가져온 것이며 참고용입니다.

Alibaba VectorIcon Library

https://www.iconfont.cn/

아이콘을 얻기에 좋은 곳입니다.

Qiantu.com

https://www.58pic.com/

배경 사진, 아바타 프레임 등을 얻을 수 있는 좋은 곳입니다.

3. 코딩

은 세 부분으로 나누어 코딩 단계를 소개합니다.

3.1 WeChat 사용자 아바타 받기

WeChat 애플릿은 WeChat 사용자 정보를 얻기 위한 API를 제공합니다. wx.getUserProfile(객체 개체)

버튼을 클릭하면 WeChat 사용자 정보를 얻을 수 있습니다.

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

WeChat 사용자 아바타 가져오기가 완료되었습니다.

참고: res.userInfo에서 반환된 사용자 아바타는 기본적으로 저해상도입니다. 사용자 아바타의 고화질 이미지를 얻으려면 처리가 필요합니다.

3.2 그림 그리기

그림 그리기 이미지는 주로 WeChat 애플릿에서 제공하는 캔버스 관련 API를 사용합니다(https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas. html )

변수 설명:

hotArr:[{name:'호랑이 액자의 해',key:'hunian'},{name:'호랑이 머리 모자',key:'shendan'},{ name:'Flag',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 이미지 저장

이전 단계에서는 캔버스에 두 장의 그림을 그렸습니다. 이제 캔버스의 내용을 로컬로 저장하겠습니다.

캔버스의 콘텐츠를 로컬 앨범에 저장하는 것도 두 단계로 나누어집니다.

1단계: 현재 캔버스의 지정된 영역의 내용을 내보내어 지정된 크기의 그림을 생성합니다.

通过使用 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);
          }
        })
      }
    });
  },

到这里也就实现了基本的头像框功能。

最后

感兴趣的小伙伴可以扫码体验：

当然了，基于上面的内容你也可以制作自己的头像小程序。

最后 提前恭祝大家春节快乐，虎年大吉！！！

【相关学习推荐：小程序开发教程】

위 내용은 호랑이 해를 맞아 아바타 프레임을 만들기 위한 작은 프로그램을 단계별로 구현해 보세요(연습)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!