對jquery插件Jcrop開發一個裁剪組件

Jcrop是一款優秀的裁剪工具，它不只能夠裁剪圖像，還能夠裁剪canvas及任何的div元素，具體可參考：

 

http://code.ciaoca.com/jquery/jcrop/

 

 

基於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);

 

 

組件的使用：

 

<! 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 >

效果圖：

 

小小提示下：

必須將Jcrop的css和js引入哦~