对jquery插件Jcrop开发一个裁剪组件
Jcrop是一款优秀的裁剪工具，它不仅可以裁剪图像，还可以裁剪canvas及任何的div元素，具体可参考：
基于Jcrop，开发一个js组件(Cut.js)，使之可进行复用：
(function(jQuery,window,undefined){
window.Cut = window.Cut || {};
var _default={
boxWidth:0,
boxHeight:0,
allowResize:true,
allowSelect:true,
target:'#CutTarget',
cutBtn:'#CutCtl',
cutBtnClickCallback:null,
jCropApi:null
};
var Jcut = function(){}
Jcut.prototype = {
init:function(cgs){
var _this = this;
var config = jQuery.extend({}, _default, cgs || {});
this.get = function(n){
return config[n];
};
this.set = function(n, v){
config[n] = v;
};
var target = _this.get("target");
if(!target){
return;
}
$(target).Jcrop({
boxWidth : _this.get("boxWidth"),
boxHeight: _this.get("boxHeight"),
allowResize : _this.get("allowResize"),
allowSelect : _this.get("allowSelect")
},function(){
jCropApi = this;
var bounds = this.getBounds();
var x1 = bounds[0] / 4;
var y1 = bounds[1] / 4;
var x2 = bounds[0] * 3 / 4;
var y2 = bounds[1] * 3 / 4;
jCropApi.setSelect([x1,y1,x2,y2]);
});
_this.bandEvent(_this.get("cutBtnClickCallback"));
},
bandEvent:function(callback){
var _this = this;
var cutBtn = _this.get("cutBtn");
$(cutBtn).bind("click",function(){
var param = jCropApi.tellSelect(),
data = {};
data.x = parseInt(param.x < 0 ? 0 : param.x);
data.y = parseInt(param.y < 0 ? 0 : param.y);
data.x2 = parseInt(param.x2 < 0 ? 0 : param.x2);
data.y2 = parseInt(param.y2 < 0 ? 0 : param.y2);
data.width = parseInt(param.w);
data.height = parseInt(param.h);
//console.log(data.x+" "+data.y+" "+data.x2+" "+data.y2+" "+data.width+" "+data.height);
if(callback){
callback(data);
}
});
}
};
Cut.Jcut = Jcut;
Cut.Jcut.singleTon = new Cut.Jcut();
})(jQuery,window);
window.Cut = window.Cut || {};
var _default={
boxWidth:0,
boxHeight:0,
allowResize:true,
allowSelect:true,
target:'#CutTarget',
cutBtn:'#CutCtl',
cutBtnClickCallback:null,
jCropApi:null
};
var Jcut = function(){}
Jcut.prototype = {
init:function(cgs){
var _this = this;
var config = jQuery.extend({}, _default, cgs || {});
this.get = function(n){
return config[n];
};
this.set = function(n, v){
config[n] = v;
};
var target = _this.get("target");
if(!target){
return;
}
$(target).Jcrop({
boxWidth : _this.get("boxWidth"),
boxHeight: _this.get("boxHeight"),
allowResize : _this.get("allowResize"),
allowSelect : _this.get("allowSelect")
},function(){
jCropApi = this;
var bounds = this.getBounds();
var x1 = bounds[0] / 4;
var y1 = bounds[1] / 4;
var x2 = bounds[0] * 3 / 4;
var y2 = bounds[1] * 3 / 4;
jCropApi.setSelect([x1,y1,x2,y2]);
});
_this.bandEvent(_this.get("cutBtnClickCallback"));
},
bandEvent:function(callback){
var _this = this;
var cutBtn = _this.get("cutBtn");
$(cutBtn).bind("click",function(){
var param = jCropApi.tellSelect(),
data = {};
data.x = parseInt(param.x < 0 ? 0 : param.x);
data.y = parseInt(param.y < 0 ? 0 : param.y);
data.x2 = parseInt(param.x2 < 0 ? 0 : param.x2);
data.y2 = parseInt(param.y2 < 0 ? 0 : param.y2);
data.width = parseInt(param.w);
data.height = parseInt(param.h);
//console.log(data.x+" "+data.y+" "+data.x2+" "+data.y2+" "+data.width+" "+data.height);
if(callback){
callback(data);
}
});
}
};
Cut.Jcut = Jcut;
Cut.Jcut.singleTon = new Cut.Jcut();
})(jQuery,window);
组件的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>裁剪工具demo</title>
<style>
</style>
<link rel="stylesheet" type="text/css" href="http://code.ciaoca.com/jquery/jcrop/demo/css/jquery.Jcrop.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://code.ciaoca.com/jquery/jcrop/demo/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="cut.js"></script>
</head>
<body>
<div class="example">
<img src="1.jpg" width="300" height="300" id="target" alt="[Jcrop Example]">
<button id="cutBtn">裁剪</button>
</div>
<script type="text/javascript">
$(function(){
Cut.Jcut.singleTon.init({
target:"#target",
cutBtn:"#cutBtn",
cutBtnClickCallback:function(data){
//alert(data.x+" "+ data.y+" "+data.x2+" "+data.y2+" "+data.width+" "+data.height);
//do something
}
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>裁剪工具demo</title>
<style>
</style>
<link rel="stylesheet" type="text/css" href="http://code.ciaoca.com/jquery/jcrop/demo/css/jquery.Jcrop.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://code.ciaoca.com/jquery/jcrop/demo/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="cut.js"></script>
</head>
<body>
<div class="example">
<img src="1.jpg" width="300" height="300" id="target" alt="[Jcrop Example]">
<button id="cutBtn">裁剪</button>
</div>
<script type="text/javascript">
$(function(){
Cut.Jcut.singleTon.init({
target:"#target",
cutBtn:"#cutBtn",
cutBtnClickCallback:function(data){
//alert(data.x+" "+ data.y+" "+data.x2+" "+data.y2+" "+data.width+" "+data.height);
//do something
}
});
});
</script>
</body>
</html>
效果图：
小小提示下：
必须将Jcrop的css和js引入哦~
