zepto+html5+php实现h5上传头像（移动端）上
需求：实现头像上传（包含图片本地上传和调用摄像头来拍照上传），上传的头像要经过处理，比如放大，缩小，固定区域裁剪功能；
流程：图片裁剪之前要先压缩，因为是两个页面之间进行的，所以要先通过php来存储经过压缩处理的图片的src，之后传上裁剪页面的固定的图片位置，在对这张进行相关的裁剪操作；
时间：一个星期，浏览器兼容等等很多问题导致截图位置总是有偏差，放大就更明显了
1、调用本地文件和摄像头：
- 之前的想法和写法 调用本地的文件使用file文件流
html：
<html><h1>选择图片：<input type="file" id="browseFile" onchange=""><input
type="button" id="saveimg" value="保存图片" /></h1></html
js:
var input_browseFile = document.getElementById("browseFile");
input_browseFile.addEventListener("change", function () {
//通过 this.files 取到 FileList ，这里只有一个
previewInImage(this.files[0]);
}, false);
function previewInImage (file) {
//通过file.size可以取得图片大小
var reader = new FileReader();
reader.onload = function( evt ){
$('img').src = evt.target.result;
}
Options_image.imgData= reader.readAsDataURL(file);
}
调用手机摄像头的方法：通过调用摄像头之后，通过video标签获取画面，然后放到canvas里面
html： `<video id="video" autoplay=""></video>`
js：
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
调用摄像头也存在很多的兼容问题，很多浏览器不支持这个人方法
②之后的想法和写法
后来用手机开始测试的时候发现，input标签可以直接调用本地文件和照相功能，唉，绕了好大个圈子，又回来了；
html：
<input type="file" id="browseFile" onchange="" style="display:none">
这一句话就可以调用手机的本地文件了，当然包含了相机
2、本地压缩图片上传
需求：首页点击头像，选择本地文件或者拍照，确定后掉转到裁剪页面，同时出现你选择的图片，因为是两个页面之间的切换，图片经过编码后不知道是问题太大的原因还是什么不能放到cookie里面，所以通过php来帮忙存储了一下，前端实现压缩过程如下：
获取图片：
这里调用了一个插件，很好用，解决了很多兼容的问题，mobileBUGFix.mini.js
之后就很好做了：注：这是别人的，稍微改了一部分；
$.fn.localResizeIMG = function (obj) {
var ViewHeight;
var ViewWidth;
var pLeft;
var pTop;
var base64;
var scale
this.on('change', function () {
var file = this.files[0];
var URL = URL || webkitURL;
var blob = URL.createObjectURL(file);
// 执行前函数
if($.isFunction(obj.before)) { obj.before(this, blob, file) };
_create(blob, file);
this.value = ''; // 清空临时数据
});
/**
* 生成base64
* @param blob 通过file获得的二进制
*/
function _create(blob) {
var img = new Image();
img.src = blob;
img.onload = function () {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = Math.max(w/$(window).width(),h/$(window).height());
if(scale>1){
ViewWidth=parseInt(Math.floor(w/scale));
ViewHeight=parseInt(Math.floor(h/scale));
}
else{
ViewWidth=w;
ViewHeight=h;
}
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = ViewWidth;
canvas.height = ViewHeight;
ctx.drawImage(that,0,0,ViewWidth,ViewHeight);
/**
* 生成base64
* 兼容修复移动设备需要引入mobileBUGFix.js
*/
base64 = canvas.toDataURL('image/jpeg');
// 修复IOS
if( navigator.userAgent.match(/iphone/i) ) {
var mpImg = new MegaPixImage(img);
mpImg.render(canvas, { maxWidth: ViewWidth, maxHeight: ViewHeight, orientation: 6});
base64 = canvas.toDataURL('image/jpeg');
}
// 修复android
if( navigator.userAgent.match(/Android/i) ) {
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0,0,ViewWidth,ViewHeight), obj.quality * 100 || 80 );
}
// 生成结果
var result = {
base64 : base64,
// clearBase64: base64.substr( base64.indexOf(',') + 1 )
};
// 执行后函数
obj.success(result);
};
}
};
页面直接这样引用上面的方法：
$('#browseFile').localResizeIMG({
//width: 500,
// quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
$('form').find('input').val(img.src);
$('form').submit();
}
});