小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

微信小程序生成特色头像，海报等是比较常见的。下面我来介绍下实现该类小程序的过程。

1. 首先选择前端来通过 canvas 绘制。这样比较节省成本，效率也高。
2. 小程序使用uniapp 来进行开发，方便后期打包为微信，百度等小程序。
3. 可以扫码体验下 我的小程序 制作个性化的头像，
   
4. 下面介绍使用 wxml2canvas 生成头像的小程序的制作过程

创建项目

1. 使用HBuilderX 创建一个 uni-app 的项目，可以参照uniapp 官网。
2. 下载项目使用的依赖 npm init 创建package.json
3. yarn add less wxml2canvas

生成头像的重要步骤

1. 首先思路是上传一张自己想做为头像的图片
2. 然后选择自己想给该图片添加的元素，利用css 定位，使图片位置重叠，产生新的效果
3. 讲最新的效果生成图片，并下载。

上传图片

上传图片可以提供两种思路，一种是直接使用微信头像。一种是用户自己上传图片

1. 使用微信头像的方案

wxLogin() {
  let _this  = this;
  wx.getUserProfile({
    desc: '获取你的头像',
    success: res => {
      console.log(res)
      _this.headUrl = res.userInfo.avatarUrl
    },
    fail: () => {
      //拒绝授权
      wx.showToast({
        title: '您拒绝了请求,不能获取你的头像',
        icon: 'error',
        duration: 2000
      });
      return;
    }
  });
},

2. 用户自己上传图片，可以直接从相册中选择，也可以使用相机。

<