微信小程序版“美图秀秀”源码

使用代码

1. 下载并安装微信开发者工具，使用微信号扫码登录开发者工具。
2. 打开微信开发者工具，点击“小程序项目”按钮，输入小程序 AppID，项目目录选择下载的代码目录，点击确定创建小程序项目。
3. 项目源码下载地址：http://code.662p.com/view/19355.html

功能实现

一、图片裁剪

1. 裁剪界面由image组件和裁剪框组成。image组件用来显示用户载入的图片；裁剪框在用户点击裁剪框按钮后浮动显示在图片上，裁剪框的遮罩效果通过背景颜色透明以及盒阴影（box-shadow）实现。
2. 在image组件上检测触摸事件，通过事件对象判断触摸点数，单点触摸时通过获取手指移动距离实现图片的自由拖动，两点触摸时，通过获取两点之间的距离计算图片缩放比例，实现图片自由缩放。
3. 在裁剪框上检测触摸事件，通过获取手指移动距离实现裁剪框自由拖动；监测裁剪框右下圆点的触摸事件，通过获取手指移动距离计算裁剪框宽、高的增减，实现裁剪框的自由缩放功能。
4. 用户裁剪完成（点击右上角√按钮后），根据保存的裁剪框宽、高以及图片缩放比例计算图片真实裁剪区域，根据计算好的区域将图片画在隐藏canvas上，得到裁剪后的图片。