cropit插件详解（一）

最新推荐文章于 2024-05-16 09:58:32 发布

@带甜味的盐@

最新推荐文章于 2024-05-16 09:58:32 发布

阅读量1.1k

点赞数

分类专栏：前端 SYW 文章标签：图片剪裁 cropit jQuery插件

本文链接：https://blog.csdn.net/s_y_w123/article/details/84595043

版权

SYW 同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端

81 篇文章 7 订阅

订阅专栏

文章目录

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编码详解【百度百科】

博客中讲解使用的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插件详解（二）

@带甜味的盐@

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
cropit插件详解（一）

cropit插件详解（一）基础介绍部分和知识补充部分看起来会比较枯燥，但是这些都是为了大家后面能更快的上手。其实也可以直接去学使用部分，遇到了问题再回来看前面的，自己选择就好。基础介绍cropit插件介绍：今天我给大家要讲解的是一款图片剪裁插件——cropit 。cropit的全称就是crop it（图片裁剪器）。cropit是一款Customizable crop and zo...
复制链接

扫一扫

专栏目录