js头像裁剪实现——canvas+Jcrop+jQuery

封好的插件不用写html啦，直接new一个就好了

<div id="test"></div>
<script>
var test = document.getElementById("test");
var clipBox = new clipBox(test,600,600,200,200);//插入插件的div，上传图区域宽，上传图区域高，预览区宽，预览区高
</script>

GitHub地址：https://github.com/Joeoeoe/pr...
两张小猪佩奇的图也送给大家

本来感觉没什么好写的，还是写一下作为第一个插件的留念吧
应该存在很多性能问题或细节问题，望有大神指教

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说明：https://developer.mozilla.org...

这里我们根据应用需要我们用第三种参数格式，具体演示MDN已经说的很清楚啦

思路：

看完上面的关键概念我觉得大家可能也大概知道如何实现了吧
1.用 <input type='file' id = 'picUp'> 上传图片
2.FileReader获取文件信息
3.获取的data给予新建的img元素
4.img元素插入div，引入Jcrop插件
5.调用Jcrop的Api，获取虚线框的位置，长宽等
6.长宽位置等信息赋予drawImage进行绘图
7.canvas.toDataURL()方法，将内容导出为base64
8.上传后台

二.关键的实现操作

图片大小缩放

//图像缩小
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的img
render()函数：写在插件里的函数，用于渲染内容到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.暂时没想到

若有不足，望有指教