预览

2.CSS代码

有了css和html的运行结果如下：

3.js代码

customerImg.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 = $('

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

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

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;

shear.js

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.js

}

/**

上传图片数据

*/

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方法

webpack的配置文件如下：

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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！