Jcrop2-x（图片剪裁）插件使用教程

Jcrop2.x（图片剪裁）插件使用教程

最近项目中用到了图片裁切上传，可是没接触过，不知用啥插件好，于是便上百度搜了一下，找到了 Jcrop2.x的插件。下面说一下使用心得与使用的基本步骤。

使用步骤

一、文件下载

首先说明一下，最好使用Jcrop2.0版本以上的，因为2.0以下的版本用户体验一点都不友好，其中有很多的坑，慎用！

• 进入官网找到“Download Jcrop”点击进入
  官网地址
  官方文档
• 点击左上方的Download Jcrop2.x进行下载，如下图
  

二、使用步骤

1. 文件引入

   方法1： CDN引入
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js"></script>
   <link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css" type="text/css">
   方法2： 本地引入
   <script src="libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="libs/Jcrop/js/Jcrop.js"></script>
   <link rel="stylesheet" href="libs/Jcrop/css/Jcrop.css" type="text/css">

2. HTML准备

   <div class="thumb">
       <img src =“photo.jpg”  id =“target”/>
       </div>

3. js代码

  a. 插入脚本
   <script type =“text / javascript”>
     $(function(){
          $('#target')Jcrop();
     })();
       </script>
  b. 指定选项
   $('#target').Jcrop({
     setSelect: [ x,y,w,h ],//指定裁剪框的大小及位置，x y:表示裁剪框的位置，w h:表示裁剪框的宽高
     aspectRatio: 1, //指定裁剪框的宽高比
     boxWidth: 400,//图片盒子的宽度
     bgColor: 'red' //指定裁剪框以外区域的背景
   });
  c. 开启缩略图功能
   $('#target').Jcrop({
     setSelect: [ x,y,w,h ],//指定裁剪框的大小及位置，x y:表示裁剪框的位置，w h:表示裁剪框的宽高
     aspectRatio: 1, //指定裁剪框的宽高比
     boxWidth: 400,//图片盒子的宽度
     bgColor: 'red' //指定裁剪框以外区域的背景
   }function () {
           thumbnail = this.initComponent('Thumbnailer', {width: 240, height: 120});//加载缩略图
           var init = this.getSelection();//获取初始状态
           console.log(init);
           x = init.x;
           y = init.y;
           w = init.w;
           h = init.h;
         });
  d. 监听事件（获取裁剪框的x,y,w,h动态值）
    var x, y, w, h;
   $('#target').on('cropmove',function(e,s,c){
     console.log(c);   // 打印的值为{ x: 10, y: 10, x2: 30, y2: 30, w: 20, h: 20 }
     x = parseInt(c.x);
         y = parseInt(c.y);
         w = parseInt(c.w);
         h = parseInt(c.h);
   });

4. css代码
   若要调整缩略图的样式可在css样式中添加以下的类名

   .jcrop-thumb {
          top: 0;
          left: 0;
       }

5. 代码示例

   var x, y, w, h;
   $('#target').Jcrop({
           setSelect: [0, 0, 10000, 10000],
           aspectRatio: 2,//裁切框的宽高比
           boxWidth: 400,//图片盒子的宽度
           bgColor: 'red',
       }, function () {
           thumbnail = this.initComponent('Thumbnailer', {width: 240, height: 120, parent: ".thumb"});//加载缩略图
           var init = this.getSelection();//获取初始状态
           console.log(init);
           x = init.x;
           y = init.y;
           w = init.w;
           h = init.h;
       });
         var container = $('#original_img').Jcrop('api').container;
         container.on('cropcreate cropmove', function (e, s, c) {
           x = parseInt(c.x);
           y = parseInt(c.y);
           w = parseInt(c.w);
           h = parseInt(c.h);
       });

三、自己对Jcrop的源码进行了一点点的优化

由于直接使用Jcrop会报一个跨域错误，同时缩略图框位置不好调,对于要将缩略图放在其他盒子的需求无法实现，为此对其源码进行了一点优化

1. 打开Jcrop.js文件查找“jcrop-thumb”字段,让代码页面跳到如下图位置：
   
2. 将该位置的代码改为如下代码

   this.element = $('<div />').addClass('jcrop-thumb')
         .width(this.width).height(this.height)
         .append(this.preview)
         .appendTo($(this.parent)||this.core.container);
       }
   $(this.parent):为缩略图对象添加一个parent属性，用作：存放缩略图将要添加的父元素的选择器

使用：

     var x, y, w, h;
     $("#btn_Jcrop").on("click", function () {
      
       if ($(this).text() == "裁切图片") {
         $(this).text("保存图片");
         $('#original_img').Jcrop({
           setSelect: [0, 0, 10000, 10000],
           aspectRatio: 2,//裁切框的宽高比
           boxWidth: 400,//图片盒子的宽度
           bgColor: 'red',
         }, function () {
           thumbnail = this.initComponent('Thumbnailer', {width: 240, height: 120, parent: ".thumb"});//加载缩略图
           var init = this.getSelection();//获取初始状态
           console.log(init);
           x = init.x;
           y = init.y;
           w = init.w;
           h = init.h;
         });

3. 优化报跨域错误的问题
   a. 找到Jcrop.js代码的1761行
   b. 将里面的代码

       var s = this.core.ui.stage, cxt = s.context;
       this.context.putImageData(cxt.getImageData(0,0,s.canvas.width,s.canvas.height),0,0);
   

   c. 用try{}catch (e){}包裹，结果如下：

     try{
       var s = this.core.ui.stage, cxt = s.context;
       this.context.putImageData(cxt.getImageData(0,0,s.canvas.width,s.canvas.height),0,0);
     }catch (e){}
   

至此跨域错误优化完成，可以放心的使用了。