应广大读者建议，已经将该项目源码提交到地址：
在大多数app项目中，都需要对用户头像的上传，之前做web开发的时候，我主要是通过input type=file的标签实现的，上传后，使用php对图片进行裁剪，这种方式比较传统简单。
此次app开发中需要做到用户选择本地相册或者进行拍照->对照片进行裁剪->最后同时更新本地头像和服务器端的图片。（app常见套路）
我将要结合：mui，cropper，jquery开发！
实现思路：
1.用户点击头像，打开actionsheet
2.选择图片或者拍照后返回的图片绝对地址传入单独的裁剪页面，跳转到裁剪页面
3.裁剪页面裁剪后选择确认则将裁减后图片保存到localstorage中（其实是把整个图片保存到本地数据库中）
4.触发一个更新上一页头像的事件，返回上一页
5.看到图片已经更改
6.保存，图片上传到服务器（json）
7.服务器将图片的base64保存到数据库（text类型），实现数据库保存图片，当然可以使用后端语言的方法还原为图片后保存在文件系统中（建议：小图可保存在数据库中，大图保存在文件系统）
实现工具和插件，直接看代码：
js
css
这里我们主要使用了一个cropper.js的插件，自行百度下载，目前比较好用的插件只有这个，大神的话自己写一个吧
注意cropper必须使用jquery，而jquery比较臃肿，在其他mui中尽量不要引入，我也是迫不得已，使用jq并非我本意
fastclcik.js是加速点击触发，一般在手机端开发其实用不到，因为一般使用tap，这里我加了进去，似乎对裁剪图片时手势操作有帮助，(+_+)?，不加也没有影响，测试过
iconfont是按钮图标
exif.js是可以检测图片拍摄时采用横向还是纵向
这几个请自行百度下载！
接下来可以开发了：
一共两个页面，
headinfo.html——编辑页面
cropper.html——裁剪页面
headinfo.html
cropper.html
裁剪头像 ![Picture]()
![]()
一开始对于headinfo.html我是打算先将拍照和相册获取的图片使用plus的io保存到项目app的_doc目录下再编辑裁剪，但是发现可以精简，直接把图片的绝对地址传到cropper中，直接编辑后保存为base64，放在localstorage中，以后需要头像的地方直接从localstorage中获取即可！我在app.js（这是我写的项目的公共js类库，处处引用）
/* *这只是其中一部分，在裁剪过程中需要用到的库函数 *主要是方便，随时可以获取保存在localstorage中的头像base64图*/(function($, owner) { // 获取用户个人信息 owner.getUserInfo = function() { var userText = localStorage.getItem('$user') || "{}"; return JSON.parse(userText); } // 存储用户个人信息 owner.setUserInfo = function(user) { user = user || {}; localStorage.setItem('$user', JSON.stringify(user)); } // 获取用户头像 owner.getHeadImg = function() { var headImg = owner.getUserInfo().my_icon || ""; return headImg; } //设置用户头像 owner.setHeadImg = function(baseData) { var userInfo = owner.getUserInfo(); userInfo.my_icon = baseData; //只对my_icon这一项进行修改，其他不动 owner.setUserInfo(userInfo); } }(mui, window.app = {}));
base64的图片格式是html5 canvas所使用的图片格式，可以直接放入img的src中！
注：如果想使用js直接在手机端将base64转换为图片文件请看：
效果图：
