孝感建设银行官网站,山西网站备案多久,公司产品网站应该怎么做,seo长尾关键词优化最近做了一个项目#xff0c;这个项目中需要实现的一个功能是#xff1a;用户自定义头像#xff08;用户在本地选择一张图片#xff0c;在本地将图片裁剪成满足系统要求尺寸的大小#xff09;。这个功能的需求是#xff1a;头像最初剪切为一个正方形。如果选择的图片小于…最近做了一个项目这个项目中需要实现的一个功能是用户自定义头像用户在本地选择一张图片在本地将图片裁剪成满足系统要求尺寸的大小。这个功能的需求是头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸那么这整张图片都会作为头像。如果大于规定的尺寸那么用户可以选择要裁剪的区域。用户点击确定按钮就将裁剪得到的图片数据发送到服务器在后端将图片数据保存成一个文件。 要完成上述功能涉及到的知识有ajaxcanvas和html5中的files接口。我将实现这个功能的代码封装到了4个模块中分别是ajax.jspreview.jsshear.js和customerImg.js。 ajax.js:用于发送ajax请求。 preview.js:用于图片预览 shear.js用于裁剪图片 customer.js:自定义头像。在这个模块中药引入ajax.jspreview.js和shear.js 我使用webpack进行打包。我还使用了jquery和jquery-ui。 我从这个项目中抽离出了这个功能。下面是这个功能的详细代码。 1.HTML代码 div classm-warp idwarpdiv classiteminput typefile nameimg idimg hiddenlabel forimg选择图片/label/divdiv classitem clearfixdiv classcol col-1div classpreview idpreviewdiv classmask/divcanvas classcvsMove idcvsMove/canvas/div/divdiv classthum col-2 colp预览/pimg src idthump classf-text-l f-marTop-20button classshear idsubmit确定/button/p/div/div/div 2.CSS代码 .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;
} 有了css和html的运行结果如下 3.js代码 customerImg.js 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; preview.js /*** 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[typefile]);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 idpreImg));}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; shear.js 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,0this.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; ajax.js 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; 最后在另一个文件中调用customerImg对象的start方法 var $ require(jquery);
var customerImg require(./customerImg.js);
customerImg.start($(#warp)); webpack的配置文件如下 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})]
}; 效果 4.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]));
} 转载于:https://www.cnblogs.com/QxQstar/p/6607039.html
