• 技术文章 >微信小程序 >小程序开发

    带你开发一个虎年春节头像生成小程序

    青灯夜游青灯夜游2022-01-28 15:55:05转载977
    本篇文章带大家跟风做一个虎年春节头像制作小程序,获取微信头像,选择头像边框,即可合成不同的虎年春节头像,希望对大家有所帮助!

    php入门到就业线上直播课:进入学习

    马上就到春节了,今天看到有网友分享了网页版的虎年头像制作工具,感觉很不错,正好打算做个小程序练手没啥主题,那就用这个试试吧。

    先上最终效果图:

    1.jpg

    说下实现流程

    第一步:先获取到当前微信的头像图片,主要代码如下,注意默认获取到的头像图片不是高清的,需要先转换成高清图片,避免生成之后很模糊。

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

    第二步:合成头像,把素材图片和第一步获取到的头像图片,获取到本地文件,然后利用小程序的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()
      },

    第三步:下载合成的图片到本地相册。

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

    这样就实现了主要的功能了。

    最后放上小程序码,欢迎大家扫码体验一下:

    2.jpg

    最后 当前项目已开源:https://github.com/hackun666/new-year-face

    祝大家春节快乐,虎年大吉!

    原文地址:https://juejin.cn/post/7057807283463389191

    作者:hackun

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

    以上就是带你开发一个虎年春节头像生成小程序的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:总结分享一些小程序开发中实用的小知识 下一篇:总结分享一些小程序开发中遇到的问题(帮忙避坑)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 手把手带你在小程序中怎么实现3d裸眼轮播效果• 一文看看如何撸出春节“智能迎春对联”小程序!• 浅析如何从小程序跳到H5页面?(示例解析)• 手把手带你实现虎年头像框制作小程序(实践)• 聊聊小程序中的 Log 日志系统,看看怎么搭建和使用• 深入浅析小程序中的全局配置
    1/1

    PHP中文网