头像裁剪框html css,js头像裁剪实现——canvas+Jcrop+jQuery

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

var test = document.getElementById("test");

var clipBox = new clipBox(test,600,600,200,200);//插入插件的div，上传图区域宽，上传图区域高，预览区宽，预览区高

本来感觉没什么好写的，还是写一下作为第一个插件的留念吧

应该存在很多性能问题或细节问题，望有大神指教

demo如图：

样式就在CSS文件里修改啦

目录

一.使用的工具，关键概念及思路

二.关键的实现操作

1.图片大小缩放

2.Jcrop的使用

3.canvas绘图实现裁剪

4..重新选择图片问题

三.不足之处

1.无法过滤图片太大的情况

2.调整图片大小不知是否过于繁琐

一.使用的工具，关键概念及思路

使用工具

简单介绍使用的库——Jcrop(需要配合jQuery用)：Jcrop是一个jQuery图像裁剪插件，通过设置参数与调用API满足裁剪过程的需求，如：设置裁剪框的最大大小，裁剪时的幕布颜色等等，具体百度Jcrop吧

关键概念

Blob与File， 的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. 的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属性中，这样我们就可以获得上传文件的数据了

把这串数据插进 的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.用 上传图片

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.暂时没想到

若有不足，望有指教