圣诞节快来了，来给你的头像加个帽子吧

看着大伙都在弄这个，我自己也来试一哈，我分别用了两种方式来实现，一种是普通的方式，一种是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