圣诞节快来了，来给你的头像加个帽子吧
看着大伙都在弄这个，我自己也来试一哈，我分别用了两种方式来实现，一种是普通的方式，一种是wxs方式
普通方式
效果图如下：
思路
- 获取头像
- 选择素材
- 缩放，移动，旋转素材
- 生成canvas
- 生成图片，保存图片
实现方式
首先是获取头像，这个不用说，大家应该都会的。
选择素材这里我准备了三张圣诞帽的素材，这个网上有很多，可以自己找下，然后我还做了一个选择手机相册的功能，如果你自己有素材的话也可以直接选择这个功能。
缩放，移动，旋转素材都是通过触摸函数去实现的，这里是先将布局做好，然后在标签上面绑定各个触摸事件，通过返回的值在标签的style里设置实现各个效果。
调整好了之后点击保存头像会获取所有参数并将头像画出来，再通过 wx.canvasToTempFilePath() 将canvas生成图片最后通过 wx.saveImageToPhotosAlbum() 保存图片。
主要代码
主要的函数就是下面这几个，代码片段我会放在文末，没有什么比较难的地方，就是要注意下计算的时候不要算错就行。
需要注意的点
由于素材的大小可能会有不同，所以在重新选择素材的时候高度要重新设置一下，这里我用了一个方法来重置高度，主要是每次重新选择素材的时候就用 wx.getImageInfo() 这个api去获取图片素材的宽高，再计算出宽高比。
wxs实现方式
实现方式
思路跟普通方式是一样的，不同的是这里将绑定事件通过 wxs 去实现，直接设置标签的参数而不通过逻辑层去处理，在性能上会比较好一点，不过这种实现方式在进行旋转的时候最后生成的图片会有不准，后面会说到。
参数的获取是通过在标签上设置style，然后点击保存的时候用 wx.createSelectorQuery() 获取各个参数的
获取旋转的值
由于 wx.createSelectorQuery() 并不能获取到 rotate 这个参数，所以我是通过下面这种方式来拿到旋转的值的，将旋转值以宽度的形式赋值给 .vo-ro
但是我发现旋转之后生成的图片不是正确的，原因是旋转之后通过 wx.createSelectorQuery() 拿到的宽高并不是图片大小的宽高，而是旋转之后的宽高，按理来说不应该是这样的，即使通过样式旋转，它的宽高应该保持不变才对，这样就造成了参数上的错误，所以画出来的图片是不准确的。
因为加了旋转之后画出来的图片会不准确，暂时想不出别的方法，我把旋转的按钮先注释掉了，只支持缩放跟拖拽。
总结
两种方式，wxs性能要更好，但是效果没第一种的好，看你要哪种了，最后祝大家圣诞节快乐，祝你生活愉快
https://developers.weixin.qq.com/s/Cizd1RmY7qdg