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

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

月光魔力鸭

2021-10-06 15:28 阅读 86 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
浏览网页的时候经常会有文本无法选中,无法复制的情况,这里简单说个简单的方法,不需要下载什么东西,也不用安装什么软件、插件、油猴啥的都不需要。
最近有系统需要知道性能瓶颈,尝试使用jmeter对重要接口进行并发测试,确定能否支撑一定的用户数量。
写到这里,基本上就完成了我之前一篇文章中写的,我要做一个自己的图床的小程序了。在最初我要做图床的时候,发现在谷歌扩展程序上一无所知,所以才开始学习的这个,到这一步,至少能勉强能跑通自己的小程序了。
上一章,我们学习和了解了websocket 是什么以及初始搭建,接下来,我们继续了解,如何进行广播以及对应的私聊呢。
本篇文章以一个实际的小项目为主题进行从头到尾的讲解实现,该项目总计开发时长约6小时,主要是有很多页面或功能都是现成的,直接复制过来的,剩下的就调整下样式、字段内容等。
小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。
最近一直琢磨着做一个第三方统一登录的这么一个小东西,虽然网上其实也挺多的.. 不过造轮子的感觉还是很爽的。 QQ /Github 比较简单,申请下就OK 了.. 微信真不是个东西,得花钱。
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。