/** * 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>')); } 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; .cvsMove.show(); .cvsMove .css({ "left":'0', 'top':'0' }); h = preImg.height(); w = preImg.width(); (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); .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;