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

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

月光魔力鸭

2021-10-06 15:28 阅读 255 喜欢 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类型确没有小数点
一直有跑着puppeteer在做pdf的生成,可以今天突然发现一个问题:预览与打印生成的PDF不一致,猜测可能是边距导致的,应该是没设置好... 然后当我在本地尝试的时候也发现了这个问题..要么是字符,要么是版本
前一阵子做了个图床,可以粘贴上传,查看服务器上的文件... 但是自己的服务器总是有问题..空间还小,就怕哪天没钱续费了。同事昨天想要一个七牛的图床,在网上找了下,只找到了 qiniu upload files插件,自己使用了下,挺好用,但是没有复制粘贴
当我们使用web打印相关的解决方案的时候,还有不少小坑值得注意下,同时需要了解几个小技巧提升在web打印上的友好度,以下整理一些常见的小技巧
与python后端进行联调,后端协议为jsonrpc ,这里简单记录下jsonrpc的通用请求函数,并附带几个栗子
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。
小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。