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

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){}
“`
至此跨域錯誤優化完成，可以放心的使用了。