cropit插件详解（二）

cropit插件详解（二）

我接着上一次说到的地方来继续说cropit插件的问题。

上次说到【图片的缩放】问题，我介绍了关于自定义【滑动条】的缩放，API是MinZoom，不知道的朋友可以去我上一篇博客cropit插件详解（一）去看一下。

这一篇博客接着上一篇来讲，我仍然以cropit的插件缩放问题开始。

---

图片的缩放问题（续）

• 我上次介绍的MinZoom是图片的最小缩放级别。
• 既然有最小缩放级别，就会有最大缩放级别，API是MaxZoom，值时数字，默认是1。
• 但是这个最大缩放级别，在进行最大的缩放时，有一点小问题，我在测试时没有看出来效果，不知道哪里出了错误。
• 如果你测试到了这里，可以试着找一下这个错误，届时联系我，或者评论我都行，我再把博客进行完善。

附上代码：

$('.image-editor').cropit({
    //图片的最大缩放级别
    MaxZOOM:1
});

---

图片加载时的缩放

• 问题：可不可以在图片一加载到预览框里时，就缩放到相应大小？
• 默认：cropit插件默认图片加载进来时是直接把图片缩放到最小，也就是说cropit会以最小的比例进行图片的加载。
• 吐槽：我在某些情况下，我确实需要每一张图片加载进来时，基本上缩放就固定了，就是要这个比例的大小，如果每次都以滑动条缩放，那么很难准确的控制到一样的缩放比例，插件如何帮我？
• 解决方案：initialZoom，值为字符串。

initialZoom介绍：

• initialZoom确定了加载图片时的缩放比例。有两个值：min，image。

两个值的详解：

• 当initialZoom:min时，图片加载时会缩放到最小（默认值）。当然要注意图片的缩放不是无限进行缩放的，它会以预览框进行参照。
• 当initialZoom:image时，图片加载时为缩放到100%（不缩放）。

$('.image-editor').cropit({
    //图片加载时的缩放
    initialZoom:'min',
    // initialZoom:'image'
});

图片加载时的缩放，不只是看预览框可以看出来效果，其实我们看【缩放滑块】在加载时所处的位置就可以看出来，加载时的缩放比例。

---

顺时针和逆时针的旋转

这个问题我就不细说了，其实这就是一个事件的问题，我直接附上代码，其实我在cropit插件详解（一）里的javascript代码中已经有体现，这里在展示一下。

//图片旋转
$('.rotate-cw').click(function () {
    $('.image-editor').cropit('rotateCW');
});
$('.rotate-ccw').click(function () {
    $('.image-editor').cropit('rotateCCW');
});

要注意的是，这个就不要在cropit插件的初始化里写了，单独写出来。

---

输出图像Base64编码

我上一篇博客提到过，cropit插件会把裁剪的图片以base64编码的形式输出，但是这个输出我们也是可以控制的。

原始的代码是这样的：

$('.export').click(function(){
    var imageData = $('.image-editor').cropit('export');
    console.log(imageData);
});

• 这个直接把base64编码输出到了控制台，大家输出的图片编码可以到控制台里看一下。
• 然后利用我博客上给的解码网站，去转换一下，就可以看到裁剪出来的图片。

只是这样原始的输出图片，显然并没有什么好说的地方，好在cropit插件给我们提供了一些API令我们可以改变输出，那么现在我就把输出改进一下：

---

改变输出图像的格式

还记得我前面提到的两种图片格式吗？我们就可以利用cropit的API进行转换。

图片格式：type：image/jpeg 和type：image/webp

$('.export').click(function(){
    var imageData = $('.image-editor').cropit('export',{
        //type:'image/webp',
    	type:'image/jpeg'
    });
});

这两格式大家在实验之后看图片的后缀名就一目了然。当然我们一般还是习惯于使用jpg（jpeg）格式，这种格式的使用时最广泛的，支持也是最好的。

---

改变输出图片的质量

顾名思义，改变质量：就是改变输出图片的大小，或者说可以定义输出图片质量和原图片质量的百分比。

质量输出：quality，值是数字。

例如：我们要输出图片质量的0.5

$('.export').click(function(){
    var imageData = $('.image-editor').cropit('export',{
        quality:.5
    });
});

补充说一点：JavaScript中的小数0~1,可以直接舍去0，直接写.*,例如0.5,可以简写成.5
当然，质量的控制也是有限度的，虽然数字可以随意写，但是真的质量衰减，肯定不会一定就按照我们的想法来，要注意这一点。

---

给输出的图片增加背景色

• 输出的背景图片，有时候我们裁剪图片时，没有那么巧就刚好和预览区域一样大，此时我们裁剪出来的图片就会带有预览框的部分。
• 如果我们要进行二次裁剪，不妨加一个背景色进行区分。
• 当然一般不会有情况，毕竟预览框的大小是可以控制的。

图片背景：fillBg,值是颜色值，如：red black

例如：设置裁剪图片的背景为红色。

$('.export').click(function(){
    var imageData = $('.image-editor').cropit('export',{
        type:'image/jpeg',
        fillBg:'red'
    });
});

要注意的是，背景的添加只有在图片格式是jpeg时才有效。

---

输出裁剪部分的原始大小

• 不再是输出预览框大小的裁剪的区域。
• 输出裁剪部分的原始大小，就是把裁剪的部分按照原图上此部分的大小进行输出。

原始大小：originalSize,值是bool类型，默认是false.

当originalSize：true，会覆盖expotZoom(这个API下面会介绍)。导出裁剪部分的原始大小。

$('.export').click(function(){
    var imageData = $('.image-editor').cropit('export',{
        originalSize：true
    });
});

---

输出图像大小的倍数

API是：exportZoom,值是数字。

当exportZoom：2时，即为剪切图像为原始剪切图像的2倍。默认为1 。

例如：输出两倍大小的裁剪图片。

$('.export').click(function(){
    var imageData = $('.image-editor').cropit('export',{
        exportZoom：2
    });
});

以上就是在输出图片时可一改变的的了，还有其他的，这里我说的是最实用的。

---

cropit插件的高级应用

cropit插件除了这些基本的API的使用，还有一些很实用的API，使用这个API可以使图片的裁剪更加的便捷。

使图片的移动可以超出预览区域

使用的API：imageBackground，值是bool类型，默认是false。

• 当把imageBackground:true时，加载进来的图片就会出现在预览框的上方,这时就好像预览框成了背景一样。
• 我们就可以让图片不在预览框这个区域内，但是鼠标控制图片移动是，鼠标还是需要在预览框内进行移动。

$('.image-editor').cropit({
    //是否设置为背景
    imageBackground:true
});

但是当你在css样式里对预览框设置了overflow:hidden时，则此效果是看不出来的，因为超出的区域都隐藏了。

---

给背景图片加上边框

当然这个给背景图片加上边框的说法有点不准确，具体效果一试便知。

使用API：imageBackgroundBorderWidth，值可以指定数字或数组。

我们以指定数字为例（数组的情况下就是给四条边都设置，指定数字，则会默认四条边都应用这个值）。

例：给背景图片加上15px的边框：

$('.image-editor').cropit({
    imageBackground:true,
    //设置15px的背景边框
    imageBackgroundBorderWidth:15
});

需要注意的是，要先把预览框设置成背景，才可以设置背景边框，不然会看不出来效果。

设置背景边框的大小是，数字后面不要带上像素单位px。

我前面为什么说，这个解释不太好呢，其实大家可以发现，设置这个作用无非就是允许背景图片超出预览框多少之后在隐藏我想这个解释可能更贴切。

---

文件的拖放

是否允许将本地文件拖到浏览器预览区域加载图像 。

使用API：allowDragNDrop，值是bool类型，默认是true，允许拖放。

$('.image-editor').cropit({
    //是否允许将本地文件拖到浏览器预览区域加载图像，默认true（允许）
    //allowDragNDrop:false,
    allowDragNDrop:true
});

这样我们在加载图片时就可以直接把图片拖到浏览器的预览框内，而不用再点击选择文件，更加快捷。

---

插件的禁用和启动

这就对应了上一篇博客中在html代码下面说的那段话，现在我们更改一下html代码和JavaScript代码。

html代码

<!-- 文件输出 -->
<button class="export">Export</button>
<button class="disable">禁用</button>
<button class="able">启动</button>

在文件的输出下面，增加禁用和启动按钮。然后设置JavaScript点击事件。

JavaScript代码

//禁用
$('.disable').on('click',function(){
    $('.image-editor').cropit('disable');
})
//启动
$('.able').on('click',function(){
    $('.image-editor').cropit('reenable');
})

JavaScript代码里的disable和rennable是cropit插件内置的两个值。我们直接使用就好，无需在做其他的定义。

---

预览框大小的控制

预览框大小的控制有两种方法：

1. 通过JavaScript控制预览框的大小。

   //控制预览框的大小
   $('.cropit-preview').css({
      'width':'300px'
   });
   

2. 通过插件来定义预览框的大小。

   $('.image-editor').cropit('previewSize',{
        width: 250, 
        height: 250
   });
   

这两种方法都可改变我们在css里设置的预览框大小，这也就为我们动态改变预览框大小提供了方法。

---

直接利用base64编码，插入图片

这一点算是扩充吧，给大家具体演示一下，如何利用输出的base64来插入到页面上。

$('.export').click(function(){
    var imageData = $('.image-editor').cropit('export',{
      type:'image/jpeg',
      quality:.5,
      fillBg:'red',
      originalSize:true
    });
    // console.log(imageData);
    //这是插图的代码
    var img = $('img');
    img:src = imageData;
    $('body').append(img);
 });

其实很简单，就是简单地利用了一下jQuery，然后把img的src属性替换成base64编码，然后插入到页面上。

---

最后简单的提一句，我们的选择文件的按钮，也是可以替换的，在css先定义好自己按钮，然后只需要在jQuery中控制，点击自己设置的按钮时就自动点击选择文件的按钮就好了。

插件下载地址

jquery.cropit.js下载地址【内附博客源码及官网网页】

cropit的插件就介绍到这里了，希望对大家有帮助。

（完）