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插件详解(二)