php 移动端头像上传插件,zepto+html5+php实现h5上传头像（移动端）上

需求：实现头像上传(包含图片本地上传和调用摄像头来拍照上传)，上传的头像要经过处理，比如放大，缩小，固定区域裁剪功能；

流程：图片裁剪之前要先压缩，因为是两个页面之间进行的，所以要先通过php来存储经过压缩处理的图片的src，之后传上裁剪页面的固定的图片位置，在对这张进行相关的裁剪操作；

时间：一个星期，浏览器兼容等等很多问题导致截图位置总是有偏差，放大就更明显了

1、调用本地文件和摄像头：

之前的想法和写法 调用本地的文件使用file文件流 html：

选择图片：

type="button" id="saveimg" value="保存图片" />

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： ``

js：

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;

}

调用摄像头也存在很多的兼容问题，很多浏览器不支持这个人方法

②之后的想法和写法 后来用手机开始测试的时候发现，input标签可以直接调用本地文件和照相功能，唉，绕了好大个圈子，又回来了； html：

这一句话就可以调用手机的本地文件了，当然包含了相机

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();

}

});