호랑이 해 봄 축제를 위한 아바타를 생성하기 위한 작은 프로그램을 개발해 보세요.

이 기사에서는 추세를 따라가며 호랑이의 해 봄 축제 아바타를 만들기 위한 작은 프로그램을 만들 수 있을 것입니다. WeChat 아바타를 받고 아바타 프레임을 선택하여 다양한 호랑이의 해 봄 축제 아바타를 합성하시기 바랍니다. 모두에게 도움이 될 거예요!

봄 축제가 곧 다가옵니다. 오늘 몇몇 네티즌들이 호랑이 해 아바타 제작 도구의 웹 버전을 공유하는 것을 봤습니다. 테마 없이 연습할 수 있는 작은 프로그램을 만들 계획이었는데, 기분이 매우 좋습니다. 그러니 이걸로 시도해 보세요.

먼저 최종 렌더링:

구현 프로세스에 대해 이야기해 보겠습니다.

1단계: 현재 WeChat 아바타 사진 가져오기 주요 코드는 다음과 같습니다. 기본적으로 얻는 아바타 사진은 높지 않습니다. -definition. 생성 후 이미지가 흐려지는 것을 방지하려면 먼저 고화질 이미지로 변환해야 합니다.

 getUserProfile(e) {
    console.log(e)
    let that = this;
    wx.getUserProfile({
      desc: '仅用于生成头像使用',
      success: (res) => {
        var 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;
        console.log(JSON.stringify(res.userInfo));
        that.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        that.drawImg();
      }
    });
  },

2단계: 아바타 합성 1단계에서 얻은 소재 사진과 아바타 사진에서 로컬 파일을 가져온 뒤, 미니 프로그램의 cavas 컴포넌트를 이용해 합성합니다.

drawImg() {
    let that = this;
    wx.showLoading({
      title: '生成头像中...',
    })
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: that.data.userInfo.avatarUrl,
        success: function (res) {
          resolve(res);
        }
      })
    });
    var mask_id = that.data.now_mask;
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: `../../assets/img/mask0${mask_id}.png`,
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {
      console.log(res)
      var windowWidth = wx.getSystemInfoSync().windowWidth
      var context = wx.createCanvasContext('myAvatar');
      var size = windowWidth /750 * 500
      // var size = 500
      context.drawImage(res[0].path, 0, 0, size, size);
      context.draw(true)
      context.save();
      context.drawImage('../../'+res[1].path, 0, 0, size, size);
      context.draw(true)
      context.save();

    })
    wx.hideLoading()
  },

3단계: 합성된 사진을 로컬 앨범에 다운로드합니다.

canvasToTempFile(){
    if(!this.data.userInfo){
      wx.showModal({
        title: '温馨提示',
        content: '请先点击上方获取微信头像',
        showCancel: false,
      })
      return
    }
    var windowWidth = wx.getSystemInfoSync().windowWidth
    var size = 500
    // var dpr = 750 / windowWidth
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      height: size,
      width: size,
      canvasId: 'myAvatar',
      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);
          }
        })
      }
    });
  },

이렇게 하면 주요 기능이 완성됩니다.

마지막으로 미니 프로그램 코드를 넣으세요. 누구나 코드를 스캔하고 경험할 수 있습니다.

마지막으로 현재 프로젝트는 오픈 소스입니다: https://github.com/hackun666/new-year- 얼굴

모두 즐거운 설 명절 보내시고, 호랑이 해에도 행운이 가득하시길 바랍니다!

원본주소 : https://juejin.cn/post/7057807283463389191

작성자 : hackun

[관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

위 내용은 호랑이 해 봄 축제를 위한 아바타를 생성하기 위한 작은 프로그램을 개발해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!