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

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

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。
最近有个小功能需要一些基础数据,找了一下在小程序上有发现,暂时还没找到他的网站,想着把这些数据爬一些下来做为基础数据使用的。本来还想着直接反编译小程序的,没想到微信变更了加密方式,以前反编译的路子走不通了。
浏览网页的时候经常会有文本无法选中,无法复制的情况,这里简单说个简单的方法,不需要下载什么东西,也不用安装什么软件、插件、油猴啥的都不需要。
扩展程序中会有需要请求外部接口获取数据的时候,如果直接在JS中写的话,会跨域,但是谷歌扩展程序支持这种情况,只需要配置一下即可。
本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。
功能来源于客户需求。客户有需求想把班级内所有学生的错题本生成pdf文档下载下来... 目前没有做这个功能,只有页面,还好chrome浏览器有保存pdf的功能,但是一想到这么多的学生,这么多的学科、以及这么多的参数... 还好有puppeteer
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。
ubuntu 配置nginx反向代理,这里简单记录下,后续再复习..