评论

小程序生成圣诞头像 Plus

简易版 + 进阶版

背景

今天中午在社区看到一篇要圣诞帽的帖子,于是下午抽了点时间写了两个demo发一篇文章吧。

实际上的内心OS:这么基础的东西,还需要来社区要?这届开发者那么菜的吗?

简易版

国庆的时候一波要小国旗的热度火了,当时在群里花了半小时写了个demo,没有发文章,这次改成简易版的圣诞头像框一起发出来吧。

实现步骤

1、获取用户头像

…略 (这个要是不会就别写往下看了)

2、将头像绘制到canvas中

获取到的头像为网络地址,小程序的canvas不支持网络图片,所以需要先使用 wx.getImageInfowx.downloadFile 获取一个本地图片地址才可以绘制到canvas中,然后再绘制一个头像框就ok了

代码

wx.getImageInfo({
  src: 头像URL,
  success: result => {
    let ctx = wx.createCanvasContext('head')
    ctx.drawImage(result['path'], 0, 0, 300, 300)
    ctx.drawImage(头像框图片地址, 0, 0, 300, 300)
    ctx.draw()
  }
})

3、将canvas导出为图片并保存到相册

使用 wx.canvasToTempFilePath 将canvas导出为图片,然后调用 wx.saveImageToPhotosAlbum 将图片保存到相册

代码

wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  width: 300,
  height: 300,
  destWidth: 300,
  destHeight: 300,
  canvasId: 'head',
  success: result => {
    wx.saveImageToPhotosAlbum({
      filePath: result.tempFilePath,
      success: () => {
        wx.showToast({
          title: '保存成功'
        })
      }
    })
  }
 })

进阶版

真正的圣诞头像一般是在原有的头像上加一顶圣诞帽,每个人的头像都是不一样的,这样就需要对圣诞帽进行调整大小、旋转等操作,这就需要一些canvas手势操作,在GitHub上随便找了个轮子 点击查看

这个轮子文档中的一些方法好像并未实现

实现步骤

步骤和简易版大致相同,核心代码轮子里都实现了,我只是调用,这里略…

代码片段 https://developers.weixin.qq.com/s/lk5QFRmQ7DdL


图片素材均来自网络,仅供学习交流,严禁用于商业用途!

本文内容及评论未经允许,禁止任何形式的转载与复制(代码可在程序中使用)

最后一次编辑于  2019-12-24  
点赞 12
收藏
评论

6 个评论

  • 卢霄霄
    卢霄霄
    2019-12-24

    也可以不用canvas的手势做,就用view的,然后记录位置和角度,生成的时候再加上。。好啦 BB完毕 我点赞了。。

    2019-12-24
    赞同 3
    回复
  • 小肥羊
    小肥羊
    2019-12-24

    没错,说的就是我,大拇指给你

    2019-12-24
    赞同 1
    回复
  • 一Eve一
    一Eve一
    2019-12-25

    优秀的

    2019-12-25
    赞同
    回复
  • 黄嫒雪
    黄嫒雪
    2019-12-24
    无意间闯入外星世界
    2019-12-24
    赞同
    回复
  • 程鼕
    程鼕
    2019-12-24

    为啥头像不能缩放

    2019-12-24
    赞同
    回复 2
    • Stephen
      Stephen
      2019-12-24
      想缩放自己改代码就可以了,我只发demo
      2019-12-24
      回复
    • 程鼕
      程鼕
      2019-12-24回复Stephen
      优秀如你  给你点赞
      2019-12-24
      回复
  • 子不语
    子不语
    2019-12-24

    啧,你这个人,有问题

    2019-12-24
    赞同
    回复
登录 后发表内容