封好的插件不用写html啦，直接new一个就好了
GitHub地址：
两张小猪佩奇的图也送给大家本来感觉没什么好写的，还是写一下作为第一个插件的留念吧
应该存在很多性能问题或细节问题，望有大神指教demo如图：
样式就在CSS文件里修改啦
目录
一.使用的工具，关键概念及思路
二.关键的实现操作1.图片大小缩放2.Jcrop的使用3.canvas绘图实现裁剪4..重新选择图片问题三.不足之处1.无法过滤图片太大的情况2.调整图片大小不知是否过于繁琐一.使用的工具，关键概念及思路
使用工具
简单介绍使用的库——Jcrop（需要配合jQuery用）：Jcrop是一个jQuery图像裁剪插件，通过设置参数与调用API满足裁剪过程的需求，如：设置裁剪框的最大大小，裁剪时的幕布颜色等等，具体百度Jcrop吧
关键概念
Blob与File，<input type='file' id = 'picUp'> 的files，FileReader，canvas下的CanvasRenderingContext2D.drawImage()
1.Blob与File:
直接MDN解释：“Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。要从其他非blob对象和数据构造一个Blob，请使用 Blob() 构造函数。要创建包含另一个blob数据的子集blob，请使用 slice()方法。要获取用户文件系统上的文件对应的Blob对象，请参阅 File文档。”简单地说：File可以取得系统里的文件，Blob不行2.<input type='file' id = 'picUp'> 的files：
input元素下有files属性，返回的是一个FileList对象(我理解为一个类数组)，这个对象包含了许多File文件（作为元素）的列表（为input附加属性multiple 即可上传多个文件）直接console.log看看吧
这是FileList
这是File
可是这样我们并没办法直接获取图片，接下来就要用FileReader了
3.FileReader:
MDN： FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。var reader = new FileReader();
简而言之，即FileReader可以读取File或者Blob的内容我们将使用reader.readAsDataURL()方法读取内容，此方法将读取内容放在reader.result属性中，这样我们就可以获得上传文件的数据了
把这串数据插进<img src=""> 的src就可以显示图片了
FileReader的具体属性与方法请大家看MDN吧
4.canvas下的CanvasRenderingContext2D.drawImage()方法：
此方法我们用于渲染裁剪出来的图片
这里我们举个例子说明下吧
var canvas = document.getElementById("canvas");var canvasPen = canvas.getContext("2d");我喜欢把canvas的2d上下文环境比作一支笔，这里的canvasPen就是CanvasRenderingContext2D了方法参数的三种格式：
canvasPen.drawImage(image, dx, dy)canvasPen.drawImage(image, dx, dy, dWidth, dHeight)canvasPen.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)MDN说明：这里我们根据应用需要我们用第三种参数格式，具体演示MDN已经说的很清楚啦
思路：
看完上面的关键概念我觉得大家可能也大概知道如何实现了吧
1.用 <input type='file' id = 'picUp'> 上传图片2.FileReader获取文件信息3.获取的data给予新建的img元素4.img元素插入div，引入Jcrop插件5.调用Jcrop的Api，获取虚线框的位置，长宽等6.长宽位置等信息赋予drawImage进行绘图7.canvas.toDataURL()方法，将内容导出为base648.上传后台二.关键的实现操作
图片大小缩放
//图像缩小while (self.shrinkPicWidth > areaWidth || self.shrinkPicHeight > areaHeight){ self.scale = Math.min(areaWidth/self.shrinkPicWidth , areaHeight/self.shrinkPicHeight); self.shrinkPicWidth = self.shrinkPicWidth * self.scale; self.shrinkPicHeight = self.shrinkPicHeight * self.scale; self.resultScale = self.resultScale * self.scale; } 一个简单的循环，解释下各个变量
areaWidth/areaHeight：放上传图片区的宽和高shrinkPicWidth/shrinkPicHeight： 比例缩小后图片的宽和高scale：每次循环缩小比例resultscScale：累计缩小的比例，最后的drawImage()方法需要用到Jcrop的使用
这里摘取了完成代码后的一部分，下面逐一解释下吧
//要在图片加载完后使用脚本insert_jcrop : function () { var self =this; //设为对象 self.jcropObject = $.Jcrop('#target',{ //调用img的id为target allowSelect : false, bgColor : "black", minSize : [50,50], maxSize : [this.previewBoxWidth,this.previewBoxHeight], onChange : function () { self.render(); }, onSelect : function () { self.render(); }}); self.jcropObject = $.Jcrop( img的id , { 参数设置(用花括号括起来) } ) //具体参数大家就自行百度吧
'#target' : id被设为target的img，即能够调用Jcrop的imgrender()函数：写在插件里的函数，用于渲染内容到canvas上，下面来介绍render函数render()函数
render : function () { var self = this; self.previewCanvasPen.clearRect(0,0,self.previewBoxWidth,self.previewBoxHeight); self.startX = self.jcropObject.tellScaled()["x"] /self.resultScale; self.startY = self.jcropObject.tellScaled()["y"] /self.resultScale; self.clipWidth = self.jcropObject.tellScaled()["w"]/self.resultScale; self.clipHeight = self.jcropObject.tellScaled()["h"]/self.resultScale; self.previewCanvasPen.drawImage(self.img , self.startX , self.startY , self.clipWidth , self.clipHeight , 0 , 0 , self.previewBoxWidth , self.previewBoxHeight);}, self.jcropObject.tellScaled()["x"] / self.jcropObject.tellScaled()["y"] ： 裁剪区域起点的X与Y坐标
self.jcropObject.tellScaled()["w"] / self.clipHeight = self.jcropObject.tellScaled()["h"] ：裁剪区域的宽与高
且每一个数值后都要 /self.resultScale
这是因为我们传递给self.previewCanvasPen的self.img是未缩小的img（即未乘resultScale的img），而我们放入裁剪区的图片是缩小后的，所以要得到相应的位置和长宽需要 /self.resultScale然后再将所求数值传给drawImage()右图为原图，如标注所示，选择框区域同理
然后渲染到canvas上就ok啦
三.不足之处
1.无法过滤图片太大的情况
2.调整图片大小不知是否过于繁琐3.居中方式需要改进4.暂时没想到若有不足，望有指教