<div class="m-warp" id="warp"><div class="item"><input type="file" name="img" id="img" hidden><label for="img">选择图片</label></div><div class="item clearfix"><div class="col col-1"><div class="preview" id="preview"><div class="mask"></div><canvas class="cvsMove" id="cvsMove"></canvas></div></div><div class="thum col-2 col"><p>预览</p><img src="" id="thum"><p class="f-text-l f-marTop-20"><button class="shear" id="submit">确定</button></p></div></div></div>

.clearfix:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;
}
img{　　vertical-align: middle;　　max-width:100%}
.m-warp{width: 800px;
}
.item{margin-top: 20px;
}
.col{float: left;
}
.col-1{position: relative;width: 450px;height: 450px;outline: 1px solid #333;
}
.preview{display: inline-block;
}
.col-2{width: 300px;margin-left: 50px;
}
label{display: block;text-align: center;width: 100px;font-size: 16px;color: #fff;background-color: #888888;height: 30px;line-height: 30px;
}
.mask{position: absolute;z-index: 1;top:0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.4);
}
.cvsMove{position: absolute;z-index: 2;outline: 2px dotted #333;cursor: move;display: none;
}

var $ = require('jquery');
var ajax = require('./ajax.js');
var preview = require('./preview.js');
var shear = require('./shear.js');
/*** 自定义头像* @constructor*/
function CustomerImg() {this.isSupport = null;this.previewBox = null;this.warp = null;
}
/*** 入口* @param warp 操作区域 jquery节点*/
CustomerImg.prototype.start = function (warp) {var info,me,warpBox;me = this;this.isSupport = this.__isSupport();if(!this.isSupport) {info = $('<p>你的浏览器不支持自定义头像，可更换高版本的浏览器自定义头像</p>');$('body').html(info);return this;}//判断操作区域示范存在if(warp && warp.length > 0){this.warp = warp;}else{return this;}//预览
    preview.start(warp,shear.start.bind(shear,warp));this.previewBox = warp.find('#preview');//确定
    warp.find('#submit').unbind('click').on('click',me.__submit.bind(me));
};
/*** 提交* @private*/
CustomerImg.prototype.__submit = function () {var cvsMove,data,fd;cvsMove = this.previewBox.find('#cvsMove');data = cvsMove[0].toDataURL('image/jpg',1);fd = {'customerImg':data};ajax.upload(fd);
};
/*** 判断是否支持自定义头像* @returns {boolean}* @private*/
CustomerImg.prototype.__isSupport = function () {var canvas,context;canvas= document.createElement('canvas');if(typeof FileReader === 'function'&& canvas.getContext && canvas.toDataURL){return true;}else{return false;}
};
var customerImg = new CustomerImg();
module.exports = customerImg;

/*** Created by star on 2017/3/7.*/
var $ = require('jquery');
/*** 预览类* @constructor*/
function Preview() {this.boxElem = null;this.callback = null;this.type = null;
}
/*** 入口* @param boxElem 操作区域* @param callback 预览结束的回调函数*/
Preview.prototype.start = function (boxElem,callback) {var chooseFile,me;me = this;if(! boxElem || boxElem.length <= 0) return this;this.boxElem = boxElem;if(typeof callback === 'function'){this.callback = callback;}if(this.__isSupport()){chooseFile = boxElem.find('input[type="file"]');chooseFile.on('change',me.fileChange.bind(me))}
};
/*** 选择图片的事件处理程序* @param event*/
Preview.prototype.fileChange = function (event) {var target,reader,file,me,type;target =  event.target;me = this;file = target.files[0];type = file.type;this.type = type;if(type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg'){alert('文件格式不正确');return this;}reader = new FileReader();if(file){reader.readAsDataURL(file);}reader.onload = function () {me.show(reader);}
};
/*** 显示从本地选择的图片* @param reader fileReader对象*/
Preview.prototype.show = function (reader) {var preView,img,me;preView = this.boxElem.find('#preview');img = preView.find('#preImg');me = this;if(img.length <= 0){preView.append($('<img id="preImg">'));}img = preView.find('#preImg');//确保图片加载完成后再执行回调img.on('load',function () {if(me.callback){me.callback(me.type);}});img.attr('src',reader.result);
};
/*** 是否支持预览* @returns {boolean}* @private*/
Preview.prototype.__isSupport = function () {return typeof FileReader === 'function';
};
var preview = new Preview();
module.exports = preview;

var $ = require('jquery');
//由于要使用jquery-ui，所以将$暴露到window上。
window.$ = $;
require('./jquery-ui.min.js');
/*** 切割* @constructor*/
function Shear() {this.previewBox = null;this.cvsMove = null;this.maxW = 200;this.maxH = 200;this.thum = null;this.fileType = 'image/jpeg';
}
/*** 入口* @param previewBox 预览元素的父元素* @param fileType 裁剪的图片的类型 如：'image/jpg'* @returns {Shear}*/
Shear.prototype.start = function (previewBox,fileType) {if(!arguments.length) return this;var me = this;this.previewBox = previewBox;if(fileType){this.fileType = fileType;}this.thum = this.previewBox.find('#thum');this.cvsMove = this.previewBox.find('#cvsMove');this.showCanvas();return this;};
/*** 显示出canvas*/
Shear.prototype.showCanvas = function () {var preImg,h,w,me,cvsH,cvsW,rateH,rateW,naturalH,naturalW,preview;me = this;preImg = this.previewBox.find('#preImg');preview = this.previewBox.find('#preview');naturalH = preImg[0].naturalHeight;naturalW = preImg[0].naturalWidth;//将canvas显示出来this.cvsMove.show();//将canvas置于（0,0）this.cvsMove.css({"left":'0','top':'0'});h = preImg.height();w = preImg.width();//规定裁剪出的图片尺寸为200px*200px//要保证裁剪的图片不变形if(h < this.maxH || w < this.maxW){this.cvsMove[0].width = cvsW = Math.min(h,w);this.cvsMove[0].height = cvsH = Math.min(h,w);}else{this.cvsMove[0].width= cvsW = this.maxW;this.cvsMove[0].height= cvsH = this.maxH;}rateH = h/naturalH;rateW = w/naturalW;this.__drawImg(preImg,0,0,cvsW/rateW,cvsH/rateH,0,0,cvsW,cvsH);//使用jquery-ui中的功能使canvas可以移动this.cvsMove.draggable({containment: "parent",drag:function (event,ui) {var left,top;left = ui.position.left;top = ui.position.top;//canvas每次移动都有从新绘制图案me.__drawImg(preImg,left/rateW,top/rateH,cvsW/rateW,cvsH/rateH,0,0,cvsW,cvsH);}})
};
/*** 在canvas上显示图片* @param myImg 要显示的图片节点* @param sx 图片的起点在原图片上的x坐标* @param sy 图片的起点在原图上的y坐标* @param sW 在原图上的宽度* @param sH 在原图上的高度* @param dx 起点在canvas上的x坐标* @param dy 起点在canvas上的y坐标* @param dW 在canvas上的宽度* @param dH 在canvas上的高度* @private*/
Shear.prototype.__drawImg = function (myImg,sx,sy,sW,sH,dx,dy,dW,dH) {var cxt,thum,me;me = this;cxt = this.cvsMove[0].getContext('2d');cxt.drawImage(myImg[0],sx,sy,sW,sH,dx,dy,dW,dH);thum = this.thum;//将canvas上的图案显示到右侧
    thum.attr('src',this.cvsMove[0].toDataURL(me.fileType,1)).width(this.maxW).height(this.maxH)
};
var shear = new Shear();
module.exports = shear;

var $ = require('jquery');
function Ajax() {}
/*** 上传图片数据*/
Ajax.prototype.upload = function (data) {$.ajax({type:'POST',data:data,dataType:'json',url:'/test/PHP/upload.php',success:function (result) {if(result.status){location.reload();}else{alert(result.msg);}}});
};
var ajax = new Ajax();
module.exports = ajax;

var $ = require('jquery');
var customerImg =require('./customerImg.js');
customerImg.start($('#warp'));

var webpack = require('webpack');
module.exports = {entry:{'customerImg':'./js/test.js','jQuery':['jquery']},output:{filename:'[name].js',library:'jQuery',libraryTarget:'umd'},plugins:[new webpack.optimize.CommonsChunkPlugin({name:'jQuery',filename:'jquery.js'})]
};

if(!empty($_POST) && isset($_POST['customerImg'])){$img = $_POST['customerImg'];$imgdata = explode(',', $img);$uniName = md5 ( uniqid ( microtime ( true ), true ) );$a = file_put_contents('./../uploads/'.$uniName.'.jpg',  base64_decode($imgdata[1]));
}