lacemi/sapi/web/croppic/js/croppic.js

/*
 * CROPPIC
 * dependancy: jQuery
 * author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin
 */

(function (window, document) {

    Croppic = function (id, options) {

        var that = this;
        that.id = id;
        that.obj = $('#' + id);
        that.outputDiv = that.obj;
        that.imgUrl = "";
        that.saveImgUrl = "";
        that.imgBackground = "";
        // DEFAULT OPTIONS
        that.options = {
            uploadUrl: '',
            uploadData: {},
            cropUrl: '',
            cropData: {},
            outputUrlId: '',
            absorptionUrl: '',
            //styles
            imgEyecandy: true,
            imgEyecandyOpacity: 0.2,
            initialZoom: 40,
            zoomFactor: 10,
            rotateFactor: 5,
            doubleZoomControls: true,
            rotateControls: true,
            modal: false,
            customUploadButtonId: '',
            customSaveButtonId: '',
            loaderHtml: '',
            scaleToFill: true,
            processInline: false,
            loadPicture: '',
            onReset: null,
            enableMousescroll: false,
            colorAbsorption: false,

            //callbacks
            onBeforeImgUpload: null,
            onAfterImgUpload: null,
            onImgDrag: null,
            onImgZoom: null,
            onImgRotate: null,
            onBeforeImgCrop: null,
            onAfterImgCrop: null,
            onBeforeRemoveCroppedImg: null,
            onAfterRemoveCroppedImg: null,
            onError: null,

        };

        // OVERWRITE DEFAULT OPTIONS
        for (i in options) that.options[i] = options[i];

        // INIT THE WHOLE DAMN THING!!!
        that.init();

    };

    Croppic.prototype = {
        id: '',
        imgInitW: 0,
        imgInitH: 0,
        imgW: 0,
        imgH: 0,
        actualRotationImgW: 0,
        actualRotationImgH: 0,
        objW: 0,
        objH: 0,
        actualRotation: 0,
        windowW: 0,
        windowH: $(window).height(),
        obj: {},
        outputDiv: {},
        outputUrlObj: {},
        img: {},
        defaultImg: {},
        croppedImg: {},
        imgEyecandy: {},
        form: {},
        iframeform: {},
        iframeobj: {},
        cropControlsUpload: {},
        cropControlsCrop: {},
        cropControlZoomMuchIn: {},
        cropControlZoomMuchOut: {},
        cropControlZoomIn: {},
        cropControlZoomOut: {},
        cropControlCrop: {},
        cropControlReset: {},
        cropControlRemoveCroppedImage: {},
        cropControlOriginal: {},
        modal: {},
        loader: {},
        cropSaveControl: {},
        ctx: {},
        imgName: '',
        init: function () {
            var that = this;

            that.objW = that.obj.width();
            that.objH = that.obj.height();

            // reset rotation
            that.actualRotation = 0;
            that.actualRotationImgH = 0;
            that.actualRotationImgW = 0;
            that.colorAbsorption = false;
            that.imgBackground = "";
            that.ctx = {};
            that.imgName = '';
            if ($.isEmptyObject(that.defaultImg)) {
                that.defaultImg = that.obj.find('img');
            }

            that.createImgUploadControls();

            if ($.isEmptyObject(that.options.loadPicture)) {
                that.bindImgUploadControl();
            } else {
                that.loadExistingImage();
            }

        },
        createImgUploadControls: function () {
            var that = this;

            var cropControlUpload = '';
            if (that.options.customUploadButtonId === '') {
                cropControlUpload = '<i class="cropControlUpload"></i>';
            }

            var cropControlRemoveCroppedImage = '<i class="cropControlRemoveCroppedImage"></i>';

            var cropControlOriginal = '<i class="cropControlOriginal"></i>';


            if ($.isEmptyObject(that.croppedImg)) {
                cropControlRemoveCroppedImage = '';
                cropControlOriginal = '';
            }
            if (!$.isEmptyObject(that.options.loadPicture)) {
                cropControlUpload = '';
            }

            var html = '<div class="cropControls cropControlsUpload"> ' + cropControlUpload + cropControlOriginal + cropControlRemoveCroppedImage + ' </div>';
            that.outputDiv.append(html);

            that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload');

            if (that.options.customUploadButtonId === '') {
                that.imgUploadControl = that.outputDiv.find('.cropControlUpload');
            }
            else {
                that.imgUploadControl = $('#' + that.options.customUploadButtonId);
                that.imgUploadControl.show();
            }

            if (that.options.customSaveButtonId !== '') {
                that.cropSaveControl = $('#' + that.options.customSaveButtonId);
                that.cropSaveControl.hide();
            }

            if (!$.isEmptyObject(that.croppedImg)) {
                that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage');
                that.cropControlOriginal = that.outputDiv.find('.cropControlOriginal');
            }

        },
        bindImgUploadControl: function () {

            var that = this;

            // CREATE UPLOAD IMG FORM
            var formHtml = '<form class="' + that.id + '_imgUploadForm" style="visibility: hidden;">  <input type="file" name="img" id="' + that.id + '_imgUploadField">  </form>';
            that.outputDiv.append(formHtml);
            that.form = that.outputDiv.find('.' + that.id + '_imgUploadForm');


            // CREATE FALLBACK IE9 IFRAME
            var fileUploadId = that.CreateFallbackIframe();

            that.imgUploadControl.off('click');
            that.imgUploadControl.on('click', function () {
                if (fileUploadId === "") {
                    that.form.find('input[type="file"]').trigger('click');
                } else {
                    //Trigger iframe file input click, otherwise access restriction error
                    that.iframeform.find('input[type="file"]').trigger('click');
                }
            });

            that.cropSaveControl.off('click');
            that.cropSaveControl.on('click', function () {
                that.destroy();
                window.location.href = "https://wwww.croppic.com?" + that.saveImgUrl;
            });

            if (!$.isEmptyObject(that.croppedImg)) {

                that.cropControlRemoveCroppedImage.on('click', function () {
                    if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof(Function)) {
                        that.options.onBeforeRemoveCroppedImg.call(that);
                    }
                    var res = confirm('您是要使用当前图片还是重新选择图片？\n\r' +
                        '[确认] 使用当前图片\n\r' +
                        '[取消] 重新选择图片');
                    var width = that.imgInitW;
                    var height = that.imgInitH;

                    that.croppedImg.remove();
                    that.croppedImg = {};
                    $(this).hide();
                    that.cropSaveControl.hide();
                    that.cropControlOriginal.hide();

                    if (typeof (that.options.onAfterRemoveCroppedImg) === typeof(Function)) {
                        that.options.onAfterRemoveCroppedImg.call(that);
                    }

                    if (!$.isEmptyObject(that.defaultImg)) {
                        that.obj.append(that.defaultImg);
                    }

                    if (that.options.outputUrlId !== '') {
                        $('#' + that.options.outputUrlId).val('');
                    }

                    that.imgUploadControl.show();
                    if (res) {
                        that.showLoader();
                        that.imgUploadControl.hide();
                        if (!$.isEmptyObject(that.croppedImg)) {
                            that.croppedImg.remove();
                        }
                        that.imgInitW = that.imgW = width;
                        that.imgInitH = that.imgH = height;
                        that.saveImgUrl = "";
                        that.obj.append('<img src="' + that.imgUrl + '">');
                        that.initCropper();
                        that.hideLoader();
                    }


                });

                that.cropControlOriginal.on('click', function () {
                    if (that.imgUrl == '') {
                        alert('请选择图片');
                        return;
                    }
                    var res = confirm('您确定要使用原图吗？\n\r' +
                        '[确认] 使用原图\n\r' +
                        '[取消] 继续编辑');
                    if (res) {
                        that.destroy();
                        window.location.href = "https://wwww.croppic.com?" + that.imgUrl;
                    }

                });
            }

            that.form.find('input[type="file"]').change(function () {

                if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
                that.showLoader();
                that.imgUploadControl.hide();
                if (that.options.processInline) {
                    // Checking Browser Support for FileReader API
                    if (typeof FileReader == "undefined") {
                        if (that.options.onError) that.options.onError.call(that, "processInline is not supported by your Browser");
                        that.reset();
                    } else {
                        var file = that.form.find('input[type="file"]')[0].files[0];

                        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
                        if (!rFilter.test(file.type)) {
                            alert("请选择jpeg、png格式的图片");
                            that.imgUploadControl.show();
                            that.hideLoader();
                            return;
                        }
                        if (!$.isEmptyObject(that.croppedImg)) {
                            that.destroy();
                        }
                        var Orientation = null;
                        //获取照片方向角属性，用户旋转控制
                        EXIF.getData(file, function () {
                            EXIF.getAllTags(this);
                            Orientation = EXIF.getTag(this, 'Orientation');
                        });
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            if (Orientation != null && Orientation != "" && Orientation != 1
                                && (Orientation == 8 || Orientation == 6 || Orientation == 3)) {
                                // that.takingCorrectJs(file);
                                that.takingCorrectJs2(e.target.result,Orientation);
                                // that.takingCorrect(e.target.result);
                                reader.clear();
                                reader.destroy();
                                return;
                            }
                            var image = new Image();
                            image.src = e.target.result;
                            image.onload = function () {
                                that.imgInitW = that.imgW = image.width;
                                that.imgInitH = that.imgH = image.height;
                                that.imgUrl = image.src;
                                if (that.options.modal) {
                                    that.createModal();
                                }
                                if (!$.isEmptyObject(that.croppedImg)) {
                                    that.croppedImg.remove();
                                }
                                that.saveImgUrl = "";
                                that.obj.append('<img src="' + image.src + '">');
                                that.initCropper();
                                that.hideLoader();
                                if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
                            }
                        };
                        reader.readAsDataURL(file);
                    }
                } else {

                    try {
                        // other modern browsers
                        formData = new FormData(that.form[0]);
                    } catch (e) {
                        // IE10 MUST have all form items appended as individual form key / value pairs
                        formData = new FormData();
                        formData.append('img', that.form.find("input[type=file]")[0].files[0]);
                    }
                    for (var key in that.options.uploadData) {
                        if (that.options.uploadData.hasOwnProperty(key)) {
                            formData.append(key, that.options.uploadData[key]);
                        }
                    }
                    $.ajax({
                        url: that.options.uploadUrl,
                        data: formData,
                        context: document.body,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST'
                    }).always(function (data) {
                        that.afterUpload(data);
                    });
                }
            });
        },

        takingCorrectJs: function (file) {
            var that = this;
            lrz(file, {quality: 1}).then(function (rst) {
                // console.log(rst.base64); //图片格式为base64;
                var image = new Image();
                image.src = rst.base64;
                image.onload = function () {
                    that.imgInitW = that.imgW = image.width;
                    that.imgInitH = that.imgH = image.height;
                    that.imgUrl = image.src;
                    if (that.options.modal) {
                        that.createModal();
                    }
                    if (!$.isEmptyObject(that.croppedImg)) {
                        that.croppedImg.remove();
                    }
                    that.saveImgUrl = "";
                    that.obj.append('<img src="' + image.src + '">');
                    that.initCropper();
                    that.hideLoader();
                    if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
                }

            }).catch(function (err) {
                alert("打开图片失败");
                // 处理失败会执行
            }).always(function () {
                // 不管是成功失败，都会执行
            });
        },
        // 此方法是旋转图片；
        takingCorrectJs2: function (img, dir) {
            var that = this;
            var image = new Image();
            image.onload = function () {
                var degree = 0, drawWidth, drawHeight, width, height;
                drawWidth = this.naturalWidth;
                drawHeight = this.naturalHeight;
            //以下改变一下图片大小
            //     var maxSide = Math.max(drawWidth, drawHeight);
            //     if (maxSide > 3072) {
            //         var minSide = Math.min(drawWidth, drawHeight);
            //         minSide = minSide / maxSide * 3072;
            //         maxSide = 3072;
            //         if (drawWidth > drawHeight) {
            //             drawWidth = maxSide;
            //             drawHeight = minSide;
            //         } else {
            //             drawWidth = minSide;
            //             drawHeight = maxSide;
            //         }
            //     }
                var canvas = document.createElement('canvas');
                canvas.width = width = drawWidth;
                canvas.height = height = drawHeight;
                var context = canvas.getContext('2d');
                //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
                switch (dir) {
               //iphone横屏拍摄，此时home键在左侧
                    case 3:
                        degree = 180;
                        drawWidth = -width;
                        drawHeight = -height;
                        break;
              //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
                    case 6:
                        canvas.width = height;
                        canvas.height = width;
                        degree = 90;
                        drawWidth = width;
                        drawHeight = -height;
                        break;
              //iphone竖屏拍摄，此时home键在上方
                    case 8:
                        canvas.width = height;
                        canvas.height = width;
                        degree = 270;
                        drawWidth = -width;
                        drawHeight = height;
                        break;
                }
              //使用canvas旋转校正
                context.rotate(degree * Math.PI / 180);
                context.drawImage(this, 0, 0, drawWidth, drawHeight);
             // 判断图片  类型 （可增加判断的类型  此处只判断了 jpeg 和png）
                var imgtype = img.includes('image/png') ? "image/png" : "image/jpeg";
             //返回校正图片
                var imageNext = new Image();
                imageNext.onload = function () {
                    that.imgInitW = that.imgW = imageNext.width;
                    that.imgInitH = that.imgH = imageNext.height;
                    that.imgUrl = imageNext.src;
                    if (that.options.modal) {
                        that.createModal();
                    }
                    if (!$.isEmptyObject(that.croppedImg)) {
                        that.croppedImg.remove();
                    }
                    that.saveImgUrl = "";
                    that.obj.append('<img src="' + imageNext.src + '">');
                    that.initCropper();
                    that.hideLoader();
                    if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
                }
                imageNext.src = canvas.toDataURL(imgtype, 1);
            }
            image.src = img;
        },
        takingCorrect: function (file) {
            var time = new Date();   // 程序计时的月从0开始取值后+1
            var t = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
            var meg = '开始上传：' + t;
            var that = this;
            var formData = new FormData();
            var mime = that.getFileMime(file);
            formData.append("imgUrl", that.convertBase64UrlToBlob(file));
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "taking", true);
            xhr.responseType = "blob";
            xhr.timeout = 60000 * 5;
            xhr.onload = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var blob = this.response;
                    var Error = this.getResponseHeader("Content-My-Error");
                    if (Error != null) {
                        var ErrorMeg = decodeURIComponent(atob(Error).split('').map(function (c) {
                            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                        }).join(''));
                        if (that.options.onError) that.options.onError.call(that, ErrorMeg);
                        that.imgUploadControl.show();
                        that.hideLoader();
                        return;
                    }
                    var filename = xhr.getResponseHeader("Content-My-filename");
                    if (filename != null) {
                        that.imgName = filename;
                        meg = meg + "  \n\r" + '上传完成准备处理：' + xhr.getResponseHeader("Content-My-start");
                        meg = meg + "  \n\r" + '处理完成准备下载：' + xhr.getResponseHeader("Content-My-end");
                        var time2 = new Date();   // 程序计时的月从0开始取值后+1
                        var t2 = time2.getHours() + ":" + time2.getMinutes() + ":" + time2.getSeconds();
                        meg = meg + "  \n\r" + '下载完成：' + t2;
                    }
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var image = new Image();
                        image.src = e.target.result;
                        image.onload = function () {
                            that.imgInitW = that.imgW = image.width;
                            that.imgInitH = that.imgH = image.height;
                            var arr = image.src.split(',');
                            that.imgUrl = 'data:' + mime + ';base64,' + arr[1];
                            if (that.options.modal) {
                                that.createModal();
                            }
                            if (!$.isEmptyObject(that.croppedImg)) {
                                that.croppedImg.remove();
                            }
                            that.saveImgUrl = "";
                            that.obj.append('<img src="' + that.imgUrl + '">');
                            that.initCropper();
                            that.hideLoader();
                            if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
                            // alert(meg);
                        }

                    }
                    reader.readAsDataURL(blob);
                } else {
                    if (that.options.onError) that.options.onError.call(that, "处理失败,错误代码["+xhr.readyState+"]");
                    that.imgUploadControl.show();
                    that.hideLoader();
                }
            };
            xhr.send(formData);
        }
        , loadExistingImage: function () {
            var that = this;

            if ($.isEmptyObject(that.croppedImg)) {
                if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);

                that.showLoader();
                if (that.options.modal) {
                    that.createModal();
                }
                if (!$.isEmptyObject(that.croppedImg)) {
                    that.croppedImg.remove();
                }

                that.imgUrl = that.options.loadPicture;

                var img = $('<img src="' + that.options.loadPicture + '">');
                that.obj.append(img);
                img.load(function () {
                    that.imgInitW = that.imgW = this.width;
                    that.imgInitH = that.imgH = this.height;
                    that.initCropper();
                    that.hideLoader();
                    if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
                });

            } else {
                that.cropControlRemoveCroppedImage.on('click', function () {

                    var res = confirm('您是要使用当前图片还是重新选择图片？\n\r' +
                        '[确认] 使用当前图片\n\r' +
                        '[取消] 重新选择图片');
                    var width = that.imgInitW;
                    var height = that.imgInitH;

                    that.croppedImg.remove();
                    $(this).hide();
                    that.cropSaveControl.hide();
                    that.cropControlOriginal.hide();

                    if (!$.isEmptyObject(that.defaultImg)) {
                        that.obj.append(that.defaultImg);
                    }
                    if (that.options.outputUrlId !== '') {
                        $('#' + that.options.outputUrlId).val('');
                    }
                    that.croppedImg = '';
                    that.reset();
                    if (res) {
                        that.showLoader();
                        that.imgUploadControl.hide();
                        if (!$.isEmptyObject(that.croppedImg)) {
                            that.croppedImg.remove();
                        }
                        that.imgInitW = that.imgW = width;
                        that.imgInitH = that.imgH = height;
                        that.saveImgUrl = "";
                        that.obj.append('<img src="' + that.imgUrl + '">');
                        that.initCropper();
                        that.hideLoader();
                    }
                });
            }

        },
        afterUpload: function (data) {
            var that = this;

            response = typeof data == 'object' ? data : jQuery.parseJSON(data);


            if (response.status == 'success') {

                that.imgInitW = that.imgW = response.width;
                that.imgInitH = that.imgH = response.height;

                if (that.options.modal) {
                    that.createModal();
                }
                if (!$.isEmptyObject(that.croppedImg)) {
                    that.croppedImg.remove();
                }

                that.imgUrl = response.url;

                var img = $('<img src="' + response.url + '">')

                that.obj.append(img);

                img.load(function () {
                    that.initCropper();
                    that.hideLoader();
                    if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
                });

                if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
            }

            if (response.status == 'error') {
                alert(response.message);
                if (that.options.onError) that.options.onError.call(that, response.message);
                that.hideLoader();
                // setTimeout( function(){ that.reset(); },2000)
            }
        },

        createModal: function () {
            var that = this;

            var marginTop = that.windowH / 2 - that.objH / 2;
            var modalHTML = '<div id="croppicModal">' + '<div id="croppicModalObj" style="width:' + that.objW + 'px; height:' + that.objH + 'px; margin:0 auto; margin-top:' + marginTop + 'px; position: relative;"> </div>' + '</div>';

            $('body').append(modalHTML);

            that.modal = $('#croppicModal');

            that.obj = $('#croppicModalObj');

        },
        destroyModal: function () {
            var that = this;

            that.obj = that.outputDiv;
            that.modal.remove();
            that.modal = {};
        },
        initCropper: function () {
            var that = this;

            /*SET UP SOME VARS*/
            that.img = that.obj.find('img');
            that.img.wrap('<div class="cropImgWrapper" style="overflow:hidden; z-index:1; position:absolute; width:' + that.objW + 'px; height:' + that.objH + 'px;"></div>');

            /*INIT DRAGGING*/
            that.createCropControls();

            if (that.options.imgEyecandy) {
                that.createEyecandy();
            }
            that.initDrag();
            that.initialScaleImg();
        },
        createEyecandy: function () {
            var that = this;

            that.imgEyecandy = that.img.clone();
            that.imgEyecandy.css({'z-index': '0', 'opacity': that.options.imgEyecandyOpacity}).appendTo(that.obj);
        },
        destroyEyecandy: function () {
            var that = this;
            that.imgEyecandy.remove();
        },
        initialScaleImg: function () {
            var that = this;
            that.zoom(0);
            that.zoom(that.options.initialZoom);

            // Adding mousewheel zoom capabilities
            if (that.options.enableMousescroll) {
                that.img.on('mousewheel', function (event) {
                    event.preventDefault();
                    if (that.colorAbsorption) {
                        return;
                    }
                    that.zoom(that.options.zoomFactor * event.deltaY);
                });
            }
            // initial center image
            that.img.css({
                'left': -(that.imgW - that.objW) / 2,
                'top': -(that.imgH - that.objH) / 2,
                'position': 'relative'
            });
            if (that.options.imgEyecandy) {
                that.imgEyecandy.css({
                    'left': -(that.imgW - that.objW) / 2,
                    'top': -(that.imgH - that.objH) / 2,
                    'position': 'relative'
                });
            }

        },
        createCropControls: function () {
            var that = this;

            // CREATE CONTROLS
            var cropControlZoomMuchIn = '';
            var cropControlZoomIn = '<i class="cropControlZoomIn"></i>';
            var cropControlZoomOut = '<i class="cropControlZoomOut"></i>';
            var cropControlZoomMuchOut = '';
            var cropControlRotateLeft = '';
            var cropControlRotateRight = '';
            var cropControlRotateMuchLeft = '';
            var cropControlRotateMuchRight = '';
            var cropControlCrop = '<i class="cropControlCrop"></i>';
            var cropControlReset = '<i class="cropControlReset"></i>';
            var cropControlOriginal = '<i class="cropControlOriginal"></i>';
            var cropControlXiColor = '<i class="cropControlXiColor"></i>';
            var cropControlXiColor2 = '<i class="cropControlXiColor2"></i>';
            var cropControlSetColor = '<i class="cropControlSetColor"></i>';

            var html;

            if (that.options.doubleZoomControls) {
                cropControlZoomMuchIn = '<i class="cropControlZoomMuchIn"></i>';
                cropControlZoomMuchOut = '<i class="cropControlZoomMuchOut"></i>';
            }
            if (that.options.rotateControls) {
                cropControlRotateLeft = '<i class="cropControlRotateLeft"></i>';
                cropControlRotateRight = '<i class="cropControlRotateRight"></i>';

                cropControlRotateMuchLeft = '<i class="cropControlRotateMuchLeft"></i>';
                cropControlRotateMuchRight = '<i class="cropControlRotateMuchRight"></i>';
            }

            html = '<div class="cropControls cropControlsCrop">' + cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut
                + cropControlRotateMuchLeft + cropControlRotateLeft + cropControlRotateRight + cropControlRotateMuchRight + cropControlCrop + '</div>';

            that.obj.append(html);


            html = '<div class="cropControls cropControlsCrop cropControlsUpload">' + cropControlXiColor2 + cropControlXiColor + cropControlSetColor + cropControlOriginal + cropControlReset + '</div>';

            that.obj.append(html);

            that.cropControlsCrop = that.obj.find('.cropControlsCrop');

            // CACHE AND BIND CONTROLS
            if (that.options.doubleZoomControls) {
                that.cropControlZoomMuchIn = that.cropControlsCrop.find('.cropControlZoomMuchIn');
                that.cropControlZoomMuchIn.on('click', function () {
                    that.zoom(that.options.zoomFactor * 10);
                });

                that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut');
                that.cropControlZoomMuchOut.on('click', function () {
                    that.zoom(-that.options.zoomFactor * 10);
                });
            }

            that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn');
            that.cropControlZoomIn.on('click', function () {
                that.zoom(that.options.zoomFactor);
            });

            that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut');
            that.cropControlZoomOut.on('click', function () {
                that.zoom(-that.options.zoomFactor);
            });

            that.cropControlRotateLeft = that.cropControlsCrop.find('.cropControlRotateLeft');
            that.cropControlRotateLeft.on('click', function () {
                that.rotate(-0.5);
            });

            that.cropControlRotateMuchLeft = that.cropControlsCrop.find('.cropControlRotateMuchLeft');
            that.cropControlRotateMuchLeft.on('click', function () {
                that.rotate(-10);
            });

            that.cropControlRotateRight = that.cropControlsCrop.find('.cropControlRotateRight');
            that.cropControlRotateRight.on('click', function () {
                that.rotate(0.5);
            });

            that.cropControlRotateMuchRight = that.cropControlsCrop.find('.cropControlRotateMuchRight');
            that.cropControlRotateMuchRight.on('click', function () {
                that.rotate(10);
            });

            that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop');
            that.cropControlCrop.on('click', function () {
                that.crop();
            });

            that.cropControlReset = that.cropControlsCrop.find('.cropControlReset');
            that.cropControlReset.on('click', function () {
                var res = confirm('您是要使用当前图片还是重新选择图片？\n\r' +
                    '[确认] 使用当前图片\n\r' +
                    '[取消] 重新选择图片');
                var width = that.imgInitW;
                var height = that.imgInitH;
                that.reset();
                if (res) {
                    that.showLoader();
                    that.imgUploadControl.hide();
                    if (!$.isEmptyObject(that.croppedImg)) {
                        that.croppedImg.remove();
                    }
                    that.imgInitW = that.imgW = width;
                    that.imgInitH = that.imgH = height;
                    that.saveImgUrl = "";
                    that.obj.append('<img src="' + that.imgUrl + '">');
                    that.initCropper();
                    that.hideLoader();
                }
            });

            that.cropControlOriginal = that.cropControlsCrop.find('.cropControlOriginal');
            that.cropControlOriginal.on('click', function () {
                if (that.imgUrl == '') {
                    alert('请选择图片');
                    return;
                }
                var res = confirm('您确定要使用原图吗？\n\r' +
                    '[确认] 使用原图\n\r' +
                    '[取消] 继续编辑');
                if (res) {
                    that.destroy();
                    // prompt(that.imgUrl);
                    window.location.href = "https://wwww.croppic.com?" + that.imgUrl;
                }
            });

            that.cropControlXiColor = that.cropControlsCrop.find('.cropControlXiColor');
            that.cropControlXiColor.on('click', function () {
                that.colorOnClick(false);
            });
            that.cropControlXiColor2 = that.cropControlsCrop.find('.cropControlXiColor2');
            that.cropControlXiColor2.on('click', function () {
                that.colorOnClick(false);
            });
            that.cropControlSetColor = that.cropControlsCrop.find('.cropControlSetColor');
            that.cropControlSetColor.on('click', function () {
                that.colorOnClick(true);
            });
            that.colpick = that.cropControlSetColor.colpick({
                onSubmit: function (hsb, hex, rgb, el) {
                    var background = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
                    that.obj.find('.cropImgWrapper').css('background', background);
                    $(el).colpickHide();
                    that.imgBackground = background;
                }
            });
        },
        colorOnClick: function (input) {
            var that = this;
            if (that.colorAbsorption || input) {
                that.cropControlsCrop.find('.cropControlXiColor').css("display", "block");
                that.cropControlsCrop.find('.cropControlXiColor2').css("display", "none");
                that.colorAbsorption = false;
            } else {
                that.cropControlsCrop.find('.cropControlXiColor').css("display", "none");
                that.cropControlsCrop.find('.cropControlXiColor2').css("display", "block");
                that.colorAbsorption = true;
            }

        },
        absorption: function (pageX, pageY) {
            var that = this;
            that.showLoader();
            that.cropControlsCrop.hide();
            var cropData = {
                imgInitW: that.imgInitW,
                imgInitH: that.imgInitH,
                imgW: that.imgW,
                imgH: that.imgH,
                imgY1: parseInt(that.img.css('top')),
                imgX1: parseInt(that.img.css('left')),
                cropH: that.objH,
                cropW: that.objW,
                rotation: that.actualRotation,
                pageX: pageX,
                pageY: pageY,
                imgBackground: that.imgBackground
            };
            var formData = new FormData();
            for (var key in cropData) {
                if (cropData.hasOwnProperty(key)) {
                    formData.append(key, cropData[key]);
                }
            }
            if (that.imgName == '') {
                formData.append("imgUrl", that.convertBase64UrlToBlob(that.imgUrl));
            } else {
                formData.append("imgName", that.imgName);
            }

            $.ajax({
                url: that.options.absorptionUrl,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST'
            }).always(function (data) {
                var response;
                try {
                    response = jQuery.parseJSON(data);
                }
                catch (err) {
                    response = typeof data == 'object' ? data : jQuery.parseJSON(data);
                }
                if (response.status == 'success') {
                    that.imgName = response.imgName;
                    var rgb = {r: response.r, g: response.g, b: response.b};
                    var background = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
                    that.obj.find('.cropImgWrapper').css("background", background);
                    that.imgBackground = background;
                    that.cropControlSetColor.colpickSetColor(rgb);
                } else if (response.status == 'error') {
                    if (that.options.onError) that.options.onError.call(that, response.message);
                } else {
                    if (that.options.onError) that.options.onError.call(that, "处理失败");
                }
                that.cropControlsCrop.show();
                that.hideLoader();
            });

        },
        initDrag: function () {
            var that = this;

            that.img.on("mousedown touchstart", function (e) {

                e.preventDefault(); // disable selection

                var pageX;
                var pageY;
                var userAgent = window.navigator.userAgent;
                if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) {
                    pageX = e.originalEvent.touches[0].pageX;
                    pageY = e.originalEvent.touches[0].pageY;
                } else {
                    pageX = e.pageX;
                    pageY = e.pageY;
                }

                var z_idx = that.img.css('z-index'),
                    drg_h = that.img.outerHeight(),
                    drg_w = that.img.outerWidth(),
                    pos_y = that.img.offset().top + drg_h - pageY,
                    pos_x = that.img.offset().left + drg_w - pageX;

                that.z_idx = z_idx;
                that.drg_h = drg_h;
                that.drg_w = drg_w;
                that.pos_y = pos_y;
                that.pos_x = pos_x;

                if (that.colorAbsorption) {
                    if (that.actualRotation !== 0) {
                        that.absorption(pageX - 10, pageY - 50);
                        return;
                    }
                    var ml = that.imgInitW / that.imgW;
                    var x = pageX - parseInt(that.img.css('left')) - 10;
                    var y = pageY - parseInt(that.img.css('top')) - 50;
                    x = parseInt(x * ml);
                    y = parseInt(y * ml);
                    if (!(x < 0 || x > that.imgInitW || y < 0 || y > that.imgInitH)) {
                        var imgData = {};
                        if ($.isEmptyObject(that.ctx)) {
                            var canvas = document.createElement("canvas");
                            if (!canvas.getContext) {
                                alert("浏览器版本太低无法使用吸色！");
                                return;
                            }
                            that.ctx = canvas.getContext("2d");
                            var newImg = new Image();
                            newImg.onload = function () {
                                canvas.width = that.imgInitW;
                                canvas.height = that.imgInitH;
                                that.ctx.drawImage(newImg, 0, 0);
                                imgData = that.ctx.getImageData(x, y, 1, 1);
                                var rgb = {r: imgData.data[0], g: imgData.data[1], b: imgData.data[2]};
                                var background = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
                                that.obj.find('.cropImgWrapper').css("background", background);
                                that.imgBackground = background;
                                that.cropControlSetColor.colpickSetColor(rgb);
                            }
                            newImg.src = that.imgUrl;
                        } else {
                            imgData = that.ctx.getImageData(x, y, 1, 1);
                            var rgb = {r: imgData.data[0], g: imgData.data[1], b: imgData.data[2]};
                            var background = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
                            that.obj.find('.cropImgWrapper').css("background", background);
                            that.imgBackground = background;
                            that.cropControlSetColor.colpickSetColor(rgb);
                        }
                    }
                    return;
                }


            }).on("mouseup", function () {
                that.img.off("mousemove");
            }).on("mouseout", function () {
                that.img.off("mousemove");
            });

            that.img.css('z-index', 1000).on("mousemove touchmove", function (e) {
                e.preventDefault();

                if (that.colorAbsorption) {
                    return;
                }
                var z_idx = that.z_idx;
                var drg_h = that.drg_h;
                var drg_w = that.drg_w;
                var pos_y = that.pos_y;
                var pos_x = that.pos_x;

                var imgTop;
                var imgLeft;
                var userAgent = window.navigator.userAgent;
                if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) {
                    imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
                    imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
                } else {
                    imgTop = e.pageY + pos_y - drg_h;
                    imgLeft = e.pageX + pos_x - drg_w;
                }

                that.img.offset({
                    top: imgTop,
                    left: imgLeft
                }).on("mouseup", function () {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });

                if (that.options.imgEyecandy) {
                    that.imgEyecandy.offset({top: imgTop, left: imgLeft});
                }

                var top = that.actualRotationImgH;
                var left = that.actualRotationImgW;
                if (that.objH < that.imgH + top * 2) {
                    if (parseInt(that.img.css('top')) > top) {
                        that.img.css('top', top);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('top', top);
                        }
                    }
                    var maxTop = -(that.imgH - that.objH + top);
                    if (parseInt(that.img.css('top')) < maxTop) {
                        that.img.css('top', maxTop);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('top', maxTop);
                        }
                    }
                } else {
                    if (parseInt(that.img.css('top')) < -top) {
                        that.img.css('top', -top);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('top', -top);
                        }
                    }
                    var maxTop = that.objH - that.imgH + top;
                    if (parseInt(that.img.css('top')) > maxTop) {
                        that.img.css('top', maxTop);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('top', maxTop);
                        }
                    }
                }

                if (that.objW < that.imgW + 2 * left) {
                    if (parseInt(that.img.css('left')) > left) {
                        that.img.css('left', left);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('left', left);
                        }
                    }
                    var maxLeft = -(that.imgW - that.objW + left);
                    if (parseInt(that.img.css('left')) < maxLeft) {
                        that.img.css('left', maxLeft);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('left', maxLeft);
                        }
                    }
                } else {
                    if (parseInt(that.img.css('left')) < -left) {
                        that.img.css('left', -left);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('left', -left);
                        }
                    }
                    var maxLeft = (that.objW - that.imgW + left);
                    if (parseInt(that.img.css('left')) > maxLeft) {
                        that.img.css('left', maxLeft);
                        if (that.options.imgEyecandy) {
                            that.imgEyecandy.css('left', maxLeft);
                        }
                    }
                }

                if (that.options.onImgDrag) that.options.onImgDrag.call(that);

            });

        },
        rotate: function (x) {
            var that = this;
            that.colorOnClick(true);
            that.actualRotation += x;
            that.img.css({
                '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
                '-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
                'transform': 'rotate(' + that.actualRotation + 'deg)',
            });
            if (that.options.imgEyecandy) {
                that.imgEyecandy.css({
                    '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
                    '-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
                    'transform': 'rotate(' + that.actualRotation + 'deg)',
                });
            }

            that.actualRotationImgH = 0;
            that.actualRotationImgW = 0;
            if (that.actualRotation != 0) {
                var actualRotation = that.actualRotation % 360;

                if (actualRotation < 0) {
                    actualRotation = 0 - actualRotation;
                }

                if (actualRotation == 90 || actualRotation == 270) {
                    if (that.imgH > that.imgW) {
                        that.actualRotationImgW = parseInt((that.imgH - that.imgW) / 2);

                    } else if (that.imgH < that.imgW) {
                        that.actualRotationImgH = parseInt((that.imgW - that.imgH) / 2);
                    }
                } else if (actualRotation != 180 && actualRotation != 360) {

                    if (actualRotation > 180) {
                        actualRotation = actualRotation - 180;
                    }
                    if (actualRotation > 90) {
                        actualRotation = 180 - actualRotation;
                    }
                    var radian = Math.sin(actualRotation * Math.PI / 180);
                    that.actualRotationImgW = parseInt(radian * (that.imgH) / 2);
                    that.actualRotationImgH = parseInt(radian * (that.imgW) / 2);
                }
            }

            if (typeof that.options.onImgRotate == 'function')
                that.options.onImgRotate.call(that);
        },
        zoom: function (x) {
            var that = this;
            that.colorOnClick(true);
            var ratio = that.imgW / that.imgH;
            var newWidth = that.imgW + x;
            var newHeight = newWidth / ratio;
            var doPositioning = true;
            if (x == 0) {
                if (newWidth - that.objW < newHeight - that.objH) {
                    newWidth = that.objW;
                    newHeight = newWidth / ratio;
                } else {
                    newHeight = that.objH;
                    newWidth = ratio * newHeight;
                }
            }
            if (newWidth < that.objW || newHeight < that.objH) {
                doPositioning = false;
            }
            if (!that.options.scaleToFill && (newWidth > that.imgInitW || newHeight > that.imgInitH)) {
                doPositioning = false;
            }

            that.imgW = newWidth;
            that.img.width(newWidth);

            that.imgH = newHeight;
            that.img.height(newHeight);

            var newTop = parseInt(that.img.css('top')) - x / 2;
            var newLeft = parseInt(that.img.css('left')) - x / 2;

            that.actualRotationImgH = 0;
            that.actualRotationImgW = 0;
            if (that.actualRotation != 0) {
                var actualRotation = that.actualRotation % 360;

                if (actualRotation < 0) {
                    actualRotation = 0 - actualRotation;
                }

                if (actualRotation == 90 || actualRotation == 270) {
                    if (that.imgH > that.imgW) {
                        that.actualRotationImgW = parseInt((that.imgH - that.imgW) / 2);

                    } else if (that.imgH < that.imgW) {
                        that.actualRotationImgH = parseInt((that.imgW - that.imgH) / 2);
                    }
                } else if (actualRotation != 180 && actualRotation != 360) {

                    if (actualRotation > 180) {
                        actualRotation = actualRotation - 180;
                    }
                    if (actualRotation > 90) {
                        actualRotation = 180 - actualRotation;
                    }
                    var radian = Math.sin(actualRotation * Math.PI / 180);
                    that.actualRotationImgW = parseInt(radian * (that.imgH) / 2);
                    that.actualRotationImgH = parseInt(radian * (that.imgW) / 2);
                }
            }

            if (newTop > -that.actualRotationImgH) {
                newTop = -that.actualRotationImgH;
            }
            if (newLeft > -that.actualRotationImgW) {
                newLeft = -that.actualRotationImgW;
            }

            var maxTop = -(newHeight - that.objH + that.actualRotationImgH);
            if (newTop < maxTop) {
                newTop = maxTop;
            }
            var maxLeft = -(newWidth - that.objW + that.actualRotationImgW);
            if (newLeft < maxLeft) {
                newLeft = maxLeft;
            }

            if (doPositioning) {
                that.img.css({'top': newTop, 'left': newLeft});
            }

            if (that.options.imgEyecandy) {
                that.imgEyecandy.width(newWidth);
                that.imgEyecandy.height(newHeight);
                if (doPositioning) {
                    that.imgEyecandy.css({'top': newTop, 'left': newLeft});
                }
            }
            if (that.options.onImgZoom) that.options.onImgZoom.call(that);

        },
        crop: function () {
            var that = this;
            that.colorOnClick(true);
            if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that);
            that.cropControlsCrop.hide();
            that.showLoader();
            var cropData = {
                imgInitW: that.imgInitW,
                imgInitH: that.imgInitH,
                imgW: that.imgW,
                imgH: that.imgH,
                imgY1: parseInt(that.img.css('top')),
                imgX1: parseInt(that.img.css('left')),
                cropH: that.objH,
                cropW: that.objW,
                rotation: that.actualRotation,
                imgBackground: that.imgBackground
            };
            var formData = new FormData();
            for (var key in cropData) {
                if (cropData.hasOwnProperty(key)) {
                    formData.append(key, cropData[key]);
                }
            }

            for (var key in that.options.cropData) {
                if (that.options.cropData.hasOwnProperty(key)) {
                    formData.append(key, that.options.cropData[key]);
                }
            }
            if (that.imgName == '') {
                formData.append("imgUrl", that.convertBase64UrlToBlob(that.imgUrl));
            } else {
                formData.append("imgName", that.imgName);
            }

            var xhr = new XMLHttpRequest();
            xhr.open("POST", that.options.cropUrl);
            xhr.responseType = "blob";
            xhr.timeout = 60000 * 5;
            xhr.onload = function () {
                that.afterCrop(xhr);
            };
            xhr.send(formData);
        },
        convertBase64UrlToBlob: function (urlData) {
            var arr = urlData.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte

            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }

            return new Blob([ab], {type: mime});
        },
        getFileMime: function (urlData) {
            var arr = urlData.split(',');
            return arr[0].match(/:(.*?);/)[1];
        },
        getFileExt: function (urlData) {
            var arr = urlData.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var FileExt;
            switch (mime) {
                case "image/jpeg":
                    FileExt = "jpg";
                    break;
                case "image/png":
                    FileExt = "png";
                    break;
                case "image/gif":
                    FileExt = "gif";
                    break;
                default:
                    FileExt = "jpg";
            }
            return FileExt;
        },
        afterCrop: function (xhr) {
            var that = this;
            if (xhr.readyState === 4 && xhr.status === 200) {

                var Error = xhr.getResponseHeader("Content-My-Error");
                if (Error != null) {
                    var ErrorMeg = decodeURIComponent(atob(Error).split('').map(function (c) {
                        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                    }).join(''));
                    if (that.options.onError) that.options.onError.call(that, ErrorMeg);
                    that.cropControlsCrop.show();
                    that.hideLoader();
                    return;
                }
                if (that.options.imgEyecandy)
                    that.imgEyecandy.hide();

                var filename = xhr.getResponseHeader("Content-My-filename");
                var blob = xhr.response;
                var reader = new FileReader();
                reader.onload = function (e) {
                    that.destroy();
                    that.saveImgUrl = 'product_image_crop_md5,' + filename + ',' + e.target.result;
                    var croppedImg = '<img class="croppedImg" src="' + e.target.result + '">';
                    that.obj.append(croppedImg);
                    if (that.options.outputUrlId !== '') {
                        $('#' + that.options.outputUrlId).val(response.url);
                    }
                    that.croppedImg = that.obj.find('.croppedImg');
                    that.croppedImg.width(that.objW + "px").height(that.objH + "px");
                    that.init();
                    that.hideLoader();
                    that.imgUploadControl.hide();
                    that.cropSaveControl.show();
                }
                reader.readAsDataURL(blob);

            } else {
                if (that.options.onError) that.options.onError.call(that, "处理失败,错误代码["+xhr.readyState+"]");
                that.hideLoader();
                that.cropControlsCrop.show();
            }
            if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response);
        },
        showLoader: function () {
            var that = this;

            that.obj.append(that.options.loaderHtml);
            that.loader = that.obj.find('.loader');

        },
        hideLoader: function () {
            var that = this;
            that.loader.remove();
        },
        reset: function () {
            var that = this;
            that.destroy();

            that.init();

            that.imgUploadControl.show();

            if (!$.isEmptyObject(that.croppedImg)) {
                that.obj.append(that.croppedImg);
                if (that.options.outputUrlId !== '') {
                    $('#' + that.options.outputUrlId).val(that.croppedImg.attr('url'));
                }
            }
            if (typeof that.options.onReset == 'function')
                that.options.onReset.call(that);


        },
        destroy: function () {
            var that = this;
            that.colorOnClick(true);
            if (that.options.modal && !$.isEmptyObject(that.modal)) {
                that.destroyModal();
            }
            if (that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy)) {
                that.destroyEyecandy();
            }
            if (!$.isEmptyObject(that.cropControlsUpload)) {
                that.cropControlsUpload.remove();
            }
            if (!$.isEmptyObject(that.cropControlsCrop)) {
                that.cropControlsCrop.remove();
            }
            if (!$.isEmptyObject(that.loader)) {
                that.loader.remove();
            }
            if (!$.isEmptyObject(that.form)) {
                that.form.remove();
            }
            that.obj.html('');
        },
        isAjaxUploadSupported: function () {
            var input = document.createElement("input");
            input.type = "file";

            return (
                "multiple" in input &&
                typeof File != "undefined" &&
                typeof FormData != "undefined" &&
                typeof (new XMLHttpRequest()).upload != "undefined");
        },
        CreateFallbackIframe: function () {
            var that = this;

            if (!that.isAjaxUploadSupported()) {

                if (jQuery.isEmptyObject(that.iframeobj)) {
                    var iframe = document.createElement("iframe");
                    iframe.setAttribute("id", that.id + "_upload_iframe");
                    iframe.setAttribute("name", that.id + "_upload_iframe");
                    iframe.setAttribute("width", "0");
                    iframe.setAttribute("height", "0");
                    iframe.setAttribute("border", "0");
                    iframe.setAttribute("src", "javascript:false;");
                    iframe.style.display = "none";
                    document.body.appendChild(iframe);
                } else {
                    iframe = that.iframeobj[0];
                }

                var myContent = '<!DOCTYPE html>'
                    + '<html><head><title>Uploading File</title></head>'
                    + '<body>'
                    + '<form '
                    + 'class="' + that.id + '_upload_iframe_form" '
                    + 'name="' + that.id + '_upload_iframe_form" '
                    + 'action="' + that.options.uploadUrl + '" method="post" '
                    + 'enctype="multipart/form-data" encoding="multipart/form-data" style="display:none;">'
                    + $("#" + that.id + '_imgUploadField')[0].outerHTML
                    + '</form></body></html>';

                iframe.contentWindow.document.open('text/htmlreplace');
                iframe.contentWindow.document.write(myContent);
                iframe.contentWindow.document.close();

                that.iframeobj = $("#" + that.id + "_upload_iframe");
                that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form");

                that.iframeform.on("change", "input", function () {
                    that.SubmitFallbackIframe(that);
                });
                that.iframeform.find("input")[0].attachEvent("onchange", function () {
                    that.SubmitFallbackIframe(that);
                });

                var eventHandlermyFile = function () {
                    if (iframe.detachEvent)
                        iframe.detachEvent("onload", eventHandlermyFile);
                    else
                        iframe.removeEventListener("load", eventHandlermyFile, false);

                    var response = that.getIframeContentJSON(iframe);

                    if (jQuery.isEmptyObject(that.modal)) {
                        that.afterUpload(response);
                    }
                }

                if (iframe.addEventListener)
                    iframe.addEventListener("load", eventHandlermyFile, true);
                if (iframe.attachEvent)
                    iframe.attachEvent("onload", eventHandlermyFile);

                return "#" + that.id + '_imgUploadField';

            } else {
                return "";
            }

        },
        SubmitFallbackIframe: function (that) {
            that.showLoader();
            if (that.options.processInline && !that.options.uploadUrl) {
                if (that.options.onError) {
                    that.options.onError.call(that, "processInline is not supported by your browser ");
                    that.hideLoader();
                }
            } else {
                if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
                that.iframeform[0].submit();
            }
        },
        getIframeContentJSON: function (iframe) {
            try {
                var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document,
                    response;

                var innerHTML = doc.body.innerHTML;
                if (innerHTML.slice(0, 5).toLowerCase() == "<pre>" && innerHTML.slice(-6).toLowerCase() == "</pre>") {
                    innerHTML = doc.body.firstChild.firstChild.nodeValue;
                }
                response = jQuery.parseJSON(innerHTML);
            } catch (err) {
                response = {success: false};
            }

            return response;
        },
        hexadecimal: function (num) {
            var r = parseInt(num).toString(16);
            if (r.length == 1) {
                return '0' + r;
            }
            return r.toUpperCase();
        }
    };
})(window, document);