首页 > 代码库 > 对jquery插件Jcrop开发一个裁剪组件

对jquery插件Jcrop开发一个裁剪组件

2024-08-07 14:24:15   220人阅读

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引入哦~

 

对jquery插件Jcrop开发一个裁剪组件


联系
我们