自定义头像 * @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 = $('

你的浏览器不支持自定义头像，可更换高版本的浏览器自定义头像

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

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,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.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;

Box = 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,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();
  //规定裁剪出的图片尺寸为200px200px
  //要保证裁剪的图片不变形
  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,cvsW/rateW,cvsH/rateH,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,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],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;

}
/**

• 上传图片数据
  */
  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;

PHP;"> 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])); }