裁切图片插件jcrop的简单使用（插件化）

因为之前好几个项目和页面都要用到图片裁切功能，我就把图片裁切插件jcrop稍稍封装了一下，以达到任一个img标签，只需要非常简单的js代码即可变成可裁切的img框；

jcrop官网：http://deepliquid.com/content/Jcrop.html

简述
将页面的某个标签初始化成有裁切框样式的图片，并把裁切框信息发送给后台裁切；

使用
1、
依次引入jquery.Jcrop.min.css，jquery.js(建议不低于1.8)，jquery.Jcrop.js，JcropPlugins.js（下面给出源码）

2、页面使用裁切框位置放置标签：

 <button id="jcrop39-upload" class="jcrop39-btn jcrop39-upload" type="button">上传图片</button>
    <div class="jcrop39-container">
        <img id="jcrop39-img" class="jcrop39-cutImg" src="裁剪图片的URL" />
        <button id="jcrop39-Imgcut" class="jcrop39-btn cut" type="button">裁切图片</button>
        <button id="jcrop39-ImgDelete" class="jcrop39-btn delete" type="button">删除图片</button>
    </div>

3、初始化:

 $(function () {

            var setting = {

                url: 'postData.ashx', /*必要参数 图片裁切处理后台 */ 
                imgTargat: "#jcrop39-img",/*必要参数 <img>的jquery选择器 */ 
                cutSuccessed: functionName,/*裁切成功处理函数 */ 
                deleteImg: functionName /*删除图片按钮处理事件 */ 
            } Jcrop39.init(setting);

        });

OK,第

OK,第三部完成后页面的 就可以做裁切选择，并且已经有提交按钮提交给后台进行实际的裁切了。

————————–这里是分割线，需要更多自定义设置的往下看—————————

好了，上面已经可以使用裁切控件了，如果需要更多定制化的内容呢，比如，我需要页面一加载就初始化好我设置大小的裁切框呢？

参数说明

     var setting = {
            url: 'hangdler.ashx',// 图片裁切处理后台，my的是/ashx/cutImage.ashx,mymg的是/postData.aspx?op=cutImg;(必要参数) 
            imgTargat: "#jcrop39-img",//(必要参数) 裁切<img>的jquery选择器
            aspectRatio: [3, 4],// 是否固定裁切框比例。是:[w, h] , 否:false, 默认:false(可选参数)
            staticPx: [150, 150],// 是否需要裁切成固定像素,做此设置后无论裁切框大小，最后裁切出来的实际图片固定的此填写w,h。是:[w, h], 否:false, 默认:false 
            animateTo: [0, 0, 100, 100],// 是否初始化裁切框。是:[x, y, x2, y2](x:裁切框左上角x轴坐标,y:裁切框左上角y轴坐标,x2:框宽度,y2:框高度), 否:false(不做裁剪框的初始化 ), 默认:false(可选参数) 
            maxSize: [1000, 1500],// 选框最大尺寸(px) 是[w, h] , 否:false, 默认:false(可选参数) 
            minSize: [20, 30],// 选框最小尺寸 是[w, g], 否:false, 默认:false(可选参数) 
            cutSuccessed: Successed,// 裁切【结果】返回成功(不代表裁切成功)回调函数，是:函数名 否:flase,默认:无 (可选参数) 
            deleteImg: deleteImgFun //删除图片按钮处理函数 ，是:函数名 否:flase,默认:隐藏 .jcrop39-container ,显示 .jcrop39-upload(可选参数) 
        }
        function Successed(data) {

            alert("删除图片按钮处理函数，没有此设置则使用默认处理逻辑：隐藏 .jcrop39-container ,显示 .jcrop39-upload");

        }

拓展函数

Jcrop39.setImg("imgUrl") 重新设置图片

PS: 上传图片功能需自己写，上传成功后可以调用拓展函数Jcrop39.setImg(“imgUrl”) 设置裁切图片。
后台我就不给出了，无非就是根据前台发送过来的参数，按要求裁切图片；

附件：
JcropPlugins.js

(function (window, undefined) {
    var Jcrop39 = {
        jcropApi: null,
        bounds: null,
        boundx: null,
        boundy: null,
        cutInfo: null,
        imgObj: null
    },
    jcrop39;
    Jcrop39.initSetting = function () {
        Jcrop39.jcropApi.release();
        if ($.isArray(jcrop39.aspectRatio)) {
            Jcrop39.jcropApi.setOptions({ aspectRatio: jcrop39.aspectRatio[0] / jcrop39.aspectRatio[1] });
        }
        if ($.isArray(jcrop39.animateTo)) {
            Jcrop39.jcropApi.animateTo(jcrop39.animateTo);
        }
        if ($.isArray(jcrop39.maxSize)) {
            Jcrop39.jcropApi.setOptions({ maxSize: jcrop39.maxSize });
        }
        if ($.isArray(jcrop39.minSize)) {
            Jcrop39.jcropApi.setOptions({ minSize: jcrop39.minSize });
        }
    };
    Jcrop39.init = function (jc) {
        jcrop39 = jc
        Jcrop39.imgObj = $(jcrop39.imgTargat);
        if (!Jcrop39.imgObj || Jcrop39.imgObj.size() == 0 || !jcrop39 || typeof (jcrop39) != "object" || !jcrop39.url) return;

        Jcrop39.imgObj.Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview
        }, function () {
            Jcrop39.jcropApi = this;
            Jcrop39.bounds = Jcrop39.jcropApi.getBounds();
            Jcrop39.boundx = Jcrop39.bounds[0];
            Jcrop39.boundy = Jcrop39.bounds[1];
            Jcrop39.initSetting();
        });
        //裁切图片
        $("#jcrop39-Imgcut").click(function () {
            var imgUrl = Jcrop39.imgObj.attr("src");
            if (!Jcrop39.imgObj || Jcrop39.imgObj.size() == 0 || !jcrop39 || typeof (jcrop39) != "object" || !jcrop39.url || !imgUrl || imgUrl == '') return;

            //正常裁切大小
            try {
                var postData = {
                    imgUrl: imgUrl,
                    rawW: parseInt(Jcrop39.boundx),
                    rawH: parseInt(Jcrop39.boundy),
                    cutW: parseInt(Jcrop39.cutInfo.w||0),
                    cutH: parseInt(Jcrop39.cutInfo.h || 0),
                    cutX: parseInt(Jcrop39.cutInfo.x || 0),
                    cutY: parseInt(Jcrop39.cutInfo.y || 0)
                };
                //固定裁切像素大小
                if ($.isArray(jcrop39.staticPx)) {
                    var zoom = (Jcrop39.cutInfo.x2 - Jcrop39.cutInfo.x) / jcrop39.staticPx[0];
                    postData.rawW = parseInt(Jcrop39.boundx / zoom);
                    postData.rawH = parseInt(Jcrop39.boundy / zoom);
                    postData.cutW = jcrop39.staticPx[0];
                    postData.cutH = jcrop39.staticPx[1];
                    postData.cutX = parseInt(Jcrop39.cutInfo.x / zoom);
                    postData.cutY = parseInt(Jcrop39.cutInfo.y / zoom);
                }
            }catch(e){
                alert("未选择裁切区域~");
                return;
            }
            //验证剪切数据 和图片地址
            if (!postData.imgUrl  //图片地址
                || isNaN(postData.rawW) || isNaN(postData.rawH) || isNaN(postData.cutW) || isNaN(postData.cutH) || isNaN(postData.cutX) || isNaN(postData.cutY) //有错误数据
                || (!postData.rawW && !postData.rawH && !postData.cutW && !postData.cutH && !postData.cutX && !postData.cutY) //全部为0 即未选择裁切区域或选了一个点
            ) {
                alert("未选择裁切区域或图片地址有误~");
                return;
            }
            $.ajax({
                url: jcrop39.url,
                type: "POST",
                data: postData,
                success: function (data) {
                    if (data && jcrop39.hasOwnProperty("cutSuccessed")) {
                        jcrop39.cutSuccessed(data);
                    }
                    else {
                        if (confirm("此操作不可撤销，确定裁切吗？")) {
                            alert("裁切成功~");
                            Jcrop39.jcropApi.disable();
                            $("#jcrop39-ImgDelete").attr("disabled", "disabled");
                        }                    
                    }
                }
            });
        });
        //删除图片
        $("#jcrop39-ImgDelete").click(function () {
            if (jcrop39.hasOwnProperty("deleteImg")) {
                jcrop39.deleteImg();
            }
            else {
                if (confirm("确定删除图片~"))
                {
                    $(".jcrop39-container").hide();
                    $("#jcrop39-upload").show();
                }
            }
        });
    };
    Jcrop39.setImg = function (imgUrl) {
        if (Jcrop39.jcropApi) {
            var preImg = new Image();
            preImg.src = imgUrl;
            Jcrop39.jcropApi.setImage(imgUrl, function () {
                Jcrop39.boundx = preImg.width;
                Jcrop39.boundy = preImg.height;
                Jcrop39.initSetting();
            });
        }
    };
    //预览图片
    function updatePreview(c) {
        Jcrop39.cutInfo = c;
    }

 window.Jcrop39 = Jcrop39;})(window);