评论

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

国庆节70周年,个性化微信头像,微信头像挂五星红旗

最近朋友圈里经常有看到这样的头像


既然这么火,大家要图又这么难,作为程序员的自己当然要自己动手实现一个。

老规矩,先看效果图

仔细研究了下,发现实现起来并不难,核心代码只有下面10行。

       wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: num,
          height: num,
          destWidth: num,
          destHeight: num,
          canvasId: 'shareImg',
          success: function(res) {
            that.setData({
              prurl: res.tempFilePath
            })
            wx.hideLoading()
          },
          fail: function(res) {
            wx.hideLoading()
          }
       })

一,首先要创建一个小程序

至于如何创建小程序,我这里就不在细讲了,我也有写过创建小程序的文章,也有路过相关的学习视频,去翻下我历史文章找找就行。

二,创建好小程序后,我们就开始来布局

布局很简单,只有下面几行代码。

<!-- 画布大小按需定制 这里我按照背景图的尺寸定的  -->
<canvas canvas-id="shareImg"></canvas>
<!-- 预览区域  -->
<view class='preview'>
  <image src='{{prurl}}' mode='aspectFit'></image>
  <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="1">生成头像1</button>
  <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="2">生成头像2</button>
  <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="3">生成头像3</button>
  <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="4">生成头像4</button>
  <button type='primary' bindtap='save'>保存分享图</button>
</view>

实现效果图如下

三,使用canvas来画图

其实我们实现微信头像挂红旗,原理很简单,就是把头像放在下面,然后把有红旗的相框盖在头像上面

下面就直接把核心代码贴给大家

let promise1 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: "../../images/xiaoshitou.jpg",
        success: function(res) {
          console.log("promise1", res)
          resolve(res);
        }
      })
    });
    let promise2 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: `../../images/head${index}.png`,
        success: function(res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {
      console.log("Promise.all", res)
      //主要就是计算好各个图文的位置
      let num = 1125;
      ctx.drawImage('../../'+res[0].path, 0, 0, num, num)
      ctx.drawImage('../../' + res[1].path, 0, 0, num, num)
      ctx.stroke()
      ctx.draw(false, () => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: num,
          height: num,
          destWidth: num,
          destHeight: num,
          canvasId: 'shareImg',
          success: function(res) {
            that.setData({
              prurl: res.tempFilePath
            })
            wx.hideLoading()
          },
          fail: function(res) {
            wx.hideLoading()
          }
        })
      })
    })

来看下画出来的效果图

四,头像加红旗画好以后,我们就要想办法把图片保存到本地了


保存图片的代码也很简单。

save: function() {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册,赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
    })
  }

来看下保存后的效果图

到这里,我的微信头像就成功的加上了小红旗了。

源码我也已经给大家准备好了,有需要的同学在文末留言即可。

后面我准备录制一门视频课程出来,来详细教大家实现这个功能,敬请关注。

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

19 个评论

  • 编程小石头
    编程小石头
    2019-09-27

    关于获取微信高清头像的问题,也找到了解决办法。

    //获取高清微信头像
      headimgHD(imageUrl) {
        console.log('原来的头像', imageUrl);
        imageUrl = imageUrl.split('/'); //把头像的路径切成数组
        //把大小数值为 46 || 64 || 96 || 132 的转换为0
        if (imageUrl[imageUrl.length - 1] && (imageUrl[imageUrl.length - 1] == 46 || imageUrl[imageUrl.length - 1] == 64 || imageUrl[imageUrl.length - 1] == 96 || imageUrl[imageUrl.length - 1] == 132)) {
          imageUrl[imageUrl.length - 1] = 0;
        }
        imageUrl = imageUrl.join('/'); //重新拼接为字符串
        console.log('高清的头像', imageUrl);
        return imageUrl;
      },


    2019-09-27
    赞同 4
    回复 2
    • 阿 山
      阿 山
      2019-09-27
      优秀
      2019-09-27
      1
      回复
    • 肖宇
      肖宇
      2019-11-05
      可以写成imageUrl[imageUrl.length - 1]  != 0
      2019-11-05
      回复
  • be.simple
    be.simple
    2019-09-26

    这里有我的代码。 正好还有个bug, 可以麻烦大家帮我看一下。生成头像是没问题的哈:

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

    我的问题:https://developers.weixin.qq.com/community/develop/doc/0006ce56be02a8d079395905556800

    2019-09-26
    赞同 4
    回复 8
    • be.simple
      be.simple
      2019-09-26
      看我头像👆👆👆,这个代码片段实现的
      2019-09-26
      1
      回复
    • 大奶奶流氓狒狒
      大奶奶流氓狒狒
      2019-09-27
      保存到相册,只能保存微信头像,没有添加任何效果
      2019-09-27
      回复
    • be.simple
      be.simple
      2019-09-27回复大奶奶流氓狒狒
      五星红旗等挂饰是在服务器上的图片, 你要把那个域名加到你的downLoadFile域名里面。 再试试看
      2019-09-27
      1
      回复
    • 大奶奶流氓狒狒
      大奶奶流氓狒狒
      2019-09-27
      谢谢您,我明白了,我把挂饰上传到我自己的服务器里了
      2019-09-27
      1
      回复
    • be.simple
      be.simple
      2019-09-27回复大奶奶流氓狒狒
      我这边测试的时候发现有时候会出bug, 同样的机型表现不一样。 你如果遇到bug,并解决了, 麻烦告诉我一下哈, thanks
      2019-09-27
      1
      回复
    查看更多(3)
  • 海蓝时见鹿🦌
    海蓝时见鹿🦌
    2019-09-26

    哇,这个厉害了。在这个特殊的时期发出来。点赞

    2019-09-26
    赞同 2
    回复 1
    • 编程小石头
      编程小石头
      2019-09-27
      后面发了讲解视频和源码,可以去看下
      2019-09-27
      回复
  • 联想华硕笔记本电脑咨询
    联想华硕笔记本电脑咨询
    2019-09-26

    大哥,我也想要挂红旗


    2019-09-26
    赞同 2
    回复 1
  • 大奶奶流氓狒狒
    大奶奶流氓狒狒
    2019-09-26

    大佬,分享一下源码吧

    2019-09-26
    赞同 1
    回复 1
  • 四季ོꦿএ
    四季ོꦿএ
    02-24

    初学者:求大佬分享红曲头像源代码研究!

    02-24
    赞同
    回复
  • 冷风吹
    冷风吹
    2019-12-19

    另外求源码

    2019-12-19
    赞同
    回复
  • 冷风吹
    冷风吹
    2019-12-19

    大佬,我的头像糊了哎咋回事

    2019-12-19
    赞同
    回复 1
  • 林间有风
    林间有风
    2019-10-31

    阿里云双11免费领取4000元优惠券

    http://t.cn/Ai3UXe6z


    2019-10-31
    赞同
    回复
  • 林间有风
    林间有风
    2019-10-31

    阿里云双十一特惠活动正式开启!

     1核-2G-1M,1年86元,3年229。 

    2核-4G-3M,3年799元。

     2核-8G-5M,3年1399元。 

    4核-8G-5M,1年5621元。 

    8核-16G-8M,3年12209元。 

    1核-1G-1M,香港服务器1年119块。 

    2核-4G-5M,香港服务器3年2926块。

    现在下单就可以买。拼团链接:https://www.aliyun.com/1111/2019/group-buying-share?ptCode=F9E6C0F5F69CFE2439882EFC16E69926647C88CF896EF535&userCode=wbqjs7bw&share_source=copy_link


    2019-10-31
    赞同
    回复

正在加载...

登录 后发表内容