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

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

使用步骤

一、文件下载

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

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

二、使用步骤

1.文件引入
javascript
方法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准备
html
<div class="thumb">
<img src =“photo.jpg” id =“target”/>
</div>

3.js代码
javascript
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样式中添加以下的类名
css
.jcrop-thumb {
top: 0;
left: 0;
}

5.代码示例
javascript
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.将该位置的代码改为如下代码
javascript
this.element = $('<div />').addClass('jcrop-thumb')
.width(this.width).height(this.height)
.append(this.preview)
.appendTo($(this.parent)||this.core.container);
}
$(this.parent):为缩略图对象添加一个parent属性，用作：存放缩略图将要添加的父元素的选择器

使用：
“`javascript
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. 将里面的代码
javascript
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){}包裹，结果如下：
javascript
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){}
“`
至此跨域错误优化完成，可以放心的使用了。