2021国庆头像微信小程序实现-最漂亮的国庆头像

2021国庆头像微信小程序实现-最漂亮的国庆头像

月光魔力鸭

2021-10-06 15:28 阅读 148 喜欢 0

国庆马上来临,头像已经先热起来了,为了蹭蹭热度,赶紧加班搞了一个。

本来是想直接github弄一个的,结果下载下来各种混淆加密,虽然也能用,不过总感觉不舒服,于是照着样式,自己实现了一个。

扫码查看

主题:微信小程序实现制作国庆头像

主要还是为了蹭热度,顺便做的这么个东西,为啥自己做,是为了以后再扩展或修改更简单一些,不至于受制于人。

准备

思路

目标还是实现一个图片的合并,这个简单(canvas就可以了)。 还有能够拿到用户头像,可以分享出去。 最后的最后,如果用户量上来的话,还可以扔点广告平摊下服务器成本。

开发

图片合并核心代码

let r1 = await that.loadFile(that.data.avatar);
let r2 = await that.loadFile(that.data.iconavatar);
let ctx = wx.createCanvasContext('avatarCanvas');
ctx.clearRect(0,0,250,250);
ctx.drawImage(r1,0,0,250,250);
ctx.drawImage(r2,0,0,250,250);
ctx.draw(false,()=>{
  wx.canvasToTempFilePath({
    x : 0,
    y : 0,
    width : 250,
    height:250,
    destWidth : 250,
    destHeight : 250,
    canvasId : 'avatarCanvas',
    success(res){
      wx.hideLoading({
        success: (res) => {},
      })
      wx.showToast({
        title: '生成成功,保存至相册',
      })
      let tempFilePath = res.tempFilePath;
      App.globalData.result = tempFilePath;
      //保存头像至相册
      wx.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success : function(data){
          //跳转到成功页面
          wx.navigateTo({
            url: '/pages/done/index',
          })
        },
        fail(er){
          console.log(er);
          if(er.errMsg == 'saveImageToPhotosAlbum:fail auth deny'){
            wx.openSetting({
              withSubscriptions: true,
              success (sdata){
                if(sdata.authSetting['scope.address.writePhotosAlbum']){
                  wx.showToast({
                    title: '请重新点击保存头像',
                  })
                }else{
                  wx.showToast({
                    title: '获取授权失败,无法保存头像',
                  })
                }
              }
            })
          }
        }
      })
    },
    fail(err){
      console.log(err)
    }
  })
})

通过canvas将两个图片合并在一起然后渲染即可。

转载请注明出处: https://chrunlee.cn/article/guoqing-avatar-wechat-app.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
整理一些相关的信息,防止后续再找不到。
mysql数据库插入double类型确没有小数点
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。
之前做了一段时间的上传相关的断点续传和秒传功能,这里整理下大体思路
接下来,我们综合上面的配置,再加一个选项页面配置,做一个天气预报的小栗子。
最近有个小功能需要一些基础数据,找了一下在小程序上有发现,暂时还没找到他的网站,想着把这些数据爬一些下来做为基础数据使用的。本来还想着直接反编译小程序的,没想到微信变更了加密方式,以前反编译的路子走不通了。
昨天实现一个tabbar的时候发现怎么都无法跳转,直接拿的官方的demo,后来才发现是自定义tabbar的问题。
登录方式现在非常多,不过像我这种小站让用户自己注册基本是不可能的了,只能依赖现有的第三方的登录来集成,之前有集成github,不过这个太过针对性,这里准备集成QQ互联登录,慢慢记录下。