cropit插件详解（一）
cropit插件详解（一）
基础介绍部分和知识补充部分看起来会比较枯燥，但是这些都是为了大家后面能更快的上手。
其实也可以直接去学使用部分，遇到了问题再回来看前面的，自己选择就好。
基础介绍
cropit插件介绍：
-
cropit插件教程：不过这个教程只是简单的说了一下API以及文字介绍。（网站可能会进不去，多刷新几次）
-
今天我给大家要讲解的是一款图片剪裁插件——cropit 。
-
cropit的全称就是crop it（图片裁剪器）。
-
cropit是一款Customizable crop and zoom(可定制裁剪和缩放)，意思就是cropit是一个“可自定义裁剪和缩放”的jQuery插件。
cropit是什么：
-
用于图像裁剪和缩放的jQuery插件。
注意版本：cropit对jQuery的适应，只到
jquery-2.1.4（点击我即可下载）及其以下版本,比此版本高的jQuery则无法使用此插件。 -
通过FileReader在本地加载图像，并使用画布裁剪它们。
-
旨在通过CSS进行极其自定义。
-
最适合您希望用户上传特定大小和宽高比的图像的情况。
cropit的特征：
- 适用于具有触摸支持的桌面和移动设备（IE 9及更低版本除外）。
- 将图像拖放到裁剪器中。
- 即使有巨大的图像也极其高效。
- 广泛的选项和API，让您完全控制。
知识补充
Base64编码：
- 最常见的用于传输8Bit字节码的编码方式之一。
- 在HTTP环境下传递较长的标识信息。
- Base64编码具有不可读性。
图片Base64编码：
- 图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。
Base64编码解决的问题：
- 我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的。
- 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。
Base64编码详解网站：
博客中讲解使用的Base64编码的【解码网站】：
Webp和jpeg图片格式：
- WebP格式，谷歌（goole）开发的一种旨在加快图片加载速度的图片格式。图片的压缩体积大约只有Jpeg的2/3，并能节省大量的服务器宽带资源和数据空间。Facebook，EBay等知名网站已经开始测试并使用Webp格式。
- WebP既支持有损压缩也支持无损压缩。相较编码Jpeg文件，编码同样质量的文件需要占用更多的计算机资源。
- 桌面版Chrome可打开WebP格式。
插件代码展示
接下来我们就进入插件的讲解部分，我们会详细的介绍cropit插件的常用API。
首先，cropit是基于jQuery的，所以我们要先引入jQuery插件，关于版本问题，我上面有说明。
说的再多不如一见，上代码：
html代码
<body>
<!-- 这个盒子包含整个文件 -->
<div class="image-editor">
<!-- 选择文件 -->
<input type="file" class="cropit-image-input">
<!-- 这是预览图显示的地方 -->
<div class="cropit-preview"></div>
<!-- 滑块缩放 -->
<div class="image-size-label">
Resize image
</div>
<!-- 图像旋转 -->
<input type="range" class="cropit-image-zoom-input">
<!-- 逆时针旋转 -->
<button class="rotate-ccw">Rotate counterclockwise</button>
<!-- 顺时针旋转 -->
<button class="rotate-cw">Rotate clockwise</button>
<!-- 文件输出 -->
<button class="export">Export</button>
</body>
需要注意的是，html代码不是一成不变的，我们到后边会加上禁用，启动按钮，或者用我们自己写的按钮，替换掉
<input type="file">的默认样式。
javascript代码
<script>
$(function () {
//插件的初始化
$('.image-editor').cropit({});
//顺时针旋转点击事件
$('.rotate-cw').click(function () {
$('.image-editor').cropit('rotateCW');
});
//逆时针旋转点击事件
$('.rotate-ccw').click(function () {
$('.image-editor').cropit('rotateCCW');
});
//export点击事件
$('.export').click(function () {
var imageData = $('.image-editor').cropit('export');
//在控制台输出base64编码
console.log(imageData);
});
});
</script>
JavaScript代码也不是一成不变的，API的运用都会在JavaScript里执行。
关于代码中注释的初始化哪一行代码，至关重要，没有哪一行代码，则无法继续任何后续操作，包括API的调用和插件的使用。
css文件
<style>
.cropit-preview {
background-color: #f8f8f8;
background-size: cover;
border: 1px solid #ccc;
border-radius: 3px;
margin-top: 7px;
width: 250px;
height: 250px;
}
.cropit-preview-image-container {
cursor: move;
}
.image-size-label {
margin-top: 10px;
}
input,
.export {
display: block;
}
button {
margin-top: 10px;
}
</style>
前面我们提到cropit旨在通过CSS进行极其自定义 ，所以我们可以自己写一些css代码来改变剪裁器的外观，使它更符合客户的审美需求。
引入的文件
<script src="../dist/jquery.min.js"></script>
<script src="../dist/jquery.cropit.js"></script>
注意：要注意代码段引入的先后次序，还有路径，这个不能有错，否则会加载出错，再次提一下jQuery的版本问题，没看的可以去博客上面的内容里看一下。
API讲解
关于API的使用，我的博客只提供详细的使用代码，和对应的值解释，就不截图展示了，这个插件不亲自运行感受，很难有直观的体会
如果你运行了上面的代码，就会发现此时我们可以选择一张图片，并且能正确的显示到预览框里，但是交互非常不友好，只有简单的不脱离边框的拖动，以及缩放滑块的使用。
解决小图片问题
- 问题：我们会发现，当图片小于预览框时，就不能正确加载进来了，怎么回事？
- 默认：cropit默认图片小于预览框任何一边时，都默认拒绝加载。也就是说图片的四条边要 大于预览框的四条边。
- 吐槽：这样其实一点都不好，如果我只想截一个小图，那么这个剪裁器这种情况就废了。
- 解决方案：
smallImage,值为字符串。
smallImage介绍：
- smallImage有三个值：
reject（拒绝），allow（允许），stretch（拉伸）
三个值详解：
- smallImage：
reject将在cropit加载小于容器的图像时调用（小于预览框的任何一边都拒绝加载） - smallImage：
allow小于容器的图像可以缩小到原始大小。但不提供滑块的缩放功能，会覆盖minZoom（最小缩放级别）选项。 - smallImage：
strength图片拉伸到适合预览框大小，小图像也会拉伸到预览框大小，但是小图像的最小缩放会遵循minZoom选项。
$('.image-editor').cropit({
//加载小图片
// smallImage:'reject',
// smallImage:'strength',
smallImage:'allow'
});
解决边框脱离问题
- 问题：现在我们遇到的问题就是，怎么把图片脱离边框移动？
- 默认：cropit默认图片是不能脱离边框，他的控制API值，默认就是
false，即不能脱离边框。 - 吐槽：如果我只想要图片的一遍，那插件岂不是又挂了……
- 解决方案：
freeMove,值为bool值。
freeMove介绍：
- 当freeMove：true时，就是可以让图片脱离容易边框的束缚，默认是false。
$('.image-editor').cropit({
// 让图片脱离边框
freeMove:true
});
图片的缩放问题
- 问题：我们怎么控制图片的缩放级别？缩放到多大？为什么有些时候小图不能进行缩放？
- 默认：cropit默认当图片完全填充预览区域时才可缩放（任何一个边都不能小于预览框） 。
- 吐槽：如果只能对大图进行缩放剪裁，小图不行，那么想必体验会极差。
- 解决方案：
MinZoom,值为字符串。
MinZoom介绍：
- MinZoom规定了图像加载之后的缩放的最小级别，它的值有两个分别是
fill,fit
两个值详解：
- 当MinZoom：
fill时，就是当图片完全填充预览区域时才可缩放（任何一个边都不能小于预览框）。 - 当MinZoom：
fit时，图像可以进一步缩小以适合预览区域，即其边缘中至少一个不得小于预览区域，加载图片的时候，会自动缩放。
注意：
fit说的是自动缩放到图片的高度或宽度与预览框的高度或宽度相同，无论图片原始尺寸多高，都会加载到和预览框一样高或宽时的状态。
$('.image-editor').cropit({
//图片最小缩放级别
MinZoom:'fill',
// MinZoom:'fit',
});
插件下载
关于这个文件大家可以利用我提供的连接去下载：
jquery.cropit.js下载地址【内附博客源码及官网网页】
未完（待续）
cropit插件的API有点多，本次的cropit详解先进行到这里，希望对你有帮助。
如果有余力继续学习的话，可以去看我的博客：
Cropit插件详解（二）