自定义分享海报

需求

用户通过选择一些活动模板，通过上传自拍照片，通过手势放大缩小，移动图片到指定位置后，将用户上传的图片与活动模板图片，合成一张图片并分享出去

技术点

vue、canvas、hammer.js、EXIF.js

1. vue--参考链接
   现有流行的渐进式框架，通过vue-cli搭建项目--vue-cli参考,通过axios来请求发送数据
2. canvas--canvas基础
   使用canvas将模板图片，用户上传图片合成成一张图片。
   难点：
   a. 在用户选择移动，放大缩小图片后如何显示在canvas对应的位置
   ---在移动图片时坐标很好确定，但是放大缩小就要特别注意
   b. 移动端拍照的坑
   手机拍照得到的照片会有一定的旋转角度,由于大部分手机都做过角度的处理，因此在用手机默认浏览图片时，照片都是以正的角度展示出来，但是实际在我们将图片画在canvas画布上时，图片时倒置的，因此需处理照片的旋转角度。在通过画布选择的时候，就会很难定位图片实际位置，推荐用一个简单的矩形，一点点选择角度，定位
3. exif.js
   获取相片角度信息
4. hammer.js
   解决移动端的手势问题实现放大缩小，移动功能

总结

功能看起来简单，但是坑还是比较多的，不过只要一点点的找准问题，一点点分析，仍旧可以解决