canvas画条形图 微信小程序_微信头像生成小程序制作

突然想到做这样一个小程序的原因是受到国庆微信头像生成的影响。本期推文将向大家介绍如何制作一个微信头像生成的小程序。

效果如下：

1、我们首先需要有一个小程序账号，这里申请账号就不再过多介绍，大家直接到官网注册即可。

2、思路分析

想要实现这样一个效果，我们只需要用到小程序提供的画布组件即可。玩过PS的人都应该知道图层的概念，其实，头像生成的原理就是图层的叠加，这么说，大家可能还是有点不清楚，所以，下面简单演示一下不用代码，如何制作一个头像。

相信大家都应该清楚了，所谓的头像生成器只不过是用代码的方式实现视频演示的功能罢了。

接下来我们看一下采用代码的方式如何实现。

以下，只对核心代码做讲解。

我们小时候都学过画画，画画之前，首先需要有一支铅笔，一个画图本子，几支彩色笔。我们一起回忆一下绘画的过程。

我们首先会用铅笔在图画本上描绘一下图形的大概轮廓，然后再用彩色笔给图案上色。一幅画就创作完成了。说白了，代码就是把这个过程写一遍而已。以下为核心代码段

// 绘图过程描述
// 创建一个画布

"shareImg">canvas>// 准备一支笔const ctx = wx.createCanvasContext('shareImg')// 定义图片宽高let num = 960 // 开始在画布上绘制微信头像
ctx.drawImage(avatarUrl, 0, 0, num, num) // 参数说明：图片路径 左上角坐标(0，0)宽高960px// 继续在画布上绘制样式图片(叠加)
ctx.drawImage(”imgPath", 0, 0, num, num)
ctx.stroke()   
// 输出图像
ctx.draw(false, () => {
        // wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片
        wx.canvasToTempFilePath({
          x: 0, // 指定的画布区域的左上角横坐标
          y: 0, // 指定的画布区域的左上角纵坐标
          width: num, // 指定的画布区域的宽度
          height: num, // 指定的画布区域的高度
          destWidth: num, // 输出的图片的宽度
          destHeight: num, // 输出的图片的高度
          canvasId: 'shareImg', // 画布标识
          quality: 1,
          success: function(res) {
            // console.log(res);
            that.setData({
              prurl: res.tempFilePath
            })
            wx.hideLoading()
          },
          fail: function(res) {
            wx.hideLoading()
          }
        })
      })      

流程图

如果大家看不懂上面的代码也没有关系，只要思路理解了，代码迟早都会写的。我用大白话简单说一下上面的代码说了个啥。

首先我们需要准备好两张图，一张是微信头像，一张是样式图片(可爱的粽子)两张图片的大小一样大，样式图片的背景为透明的，这样微信头像在下面，样式图片在上面，就不会产生覆盖，因为样式图片的背景是透明的。解释到这里，我想大家都应该明白了头像生成的原理啦。我们只需要要设计师做很多很多样式图片给我们，然后和微信头像叠加即可生成各式各样的微信头像啦。

微信头像生成小程序，我已经发布到微信平台上了，大家可以微信搜索"哥们并肩走过"小程序，或者扫一扫下面的小程序码即可进入小程序。样式图片用了创客贴提供的样式创作的，应该还不算丑。哈哈。

其实，大家可以思考一下，既然我们可以做一个微信头像生成小程序，哪能不能创作出一些更好玩的东西呢？比如校徽生成小程序，艺术签名生成小程序等等，剩下的，就有待各位实践啦。只不过，刚好最近端午快要到了，就选了端午头像生成小程序这样一个题材。大家端午节快乐呀！

那么这一期的推文就到这里啦。拜拜

小程序制作过程参考资料如下：

1、Promise用法

https://www.jianshu.com/p/7e60fc1be1b2

2、国庆头像绘制

https://blog.csdn.net/qiushi_1990/article/details/101511585

3、样式图片制作

https://www.chuangkit.com/

6、小程序官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

关注哥们并肩走过

与你分享我的

生活趣事/好物推荐/旅行见闻/编程思考