Jquery插件-Html5图片上传并裁剪

/**
 * 图片裁剪
 * @author yanglizhe
 * 2015/11/16
 */
(function($){

    /**
     * Drag
     */
    var Drag={obj:null,init:function(elementHeader,element){elementHeader.onmousedown=Drag.start;elementHeader.obj=element;if(isNaN(parseInt(element.style.left))){element.style.left="0px"}if(isNaN(parseInt(element.style.top))){element.style.top="0px"}element.onDragStart=new Function();element.onDragEnd=new Function();element.onDrag=new Function()},start:function(event){var element=Drag.obj=this.obj;event=Drag.fixE(event);if(event.which!=1){return true}element.onDragStart();element.lastMouseX=event.clientX;element.lastMouseY=event.clientY;document.onmouseup=Drag.end;document.onmousemove=Drag.drag;return false},drag:function(event){event=Drag.fixE(event);if(event.which==0){return Drag.end()}var element=Drag.obj;var _clientX=event.clientY;var _clientY=event.clientX;if(element.lastMouseX==_clientY&&element.lastMouseY==_clientX){return false}var _lastX=parseInt(element.style.top);var _lastY=parseInt(element.style.left);var newX,newY;newX=_lastY+_clientY-element.lastMouseX;newY=_lastX+_clientX-element.lastMouseY;element.style.left=newX+"px";element.style.top=newY+"px";element.lastMouseX=_clientY;element.lastMouseY=_clientX;element.onDrag(newX,newY);return false},end:function(event){event=Drag.fixE(event);document.onmousemove=null;document.onmouseup=null;var _onDragEndFuc=Drag.obj.onDragEnd();Drag.obj=null;return _onDragEndFuc},fixE:function(ig_){if(typeof ig_=="undefined"){ig_=window.event}if(typeof ig_.layerX=="undefined"){ig_.layerX=ig_.offsetX}if(typeof ig_.layerY=="undefined"){ig_.layerY=ig_.offsetY}if(typeof ig_.which=="undefined"){ig_.which=ig_.button}return ig_}};

    /**
     * 创建样式表
     * @param String cssStr
     */
    function createStyle(cssStr){
        if( document.createStyleSheet){
            var style = document.createStyleSheet();
            style.cssText = cssStr;
        }
        else{
            var style = document.createElement("style");
            style.type = "text/css";
            style.textContent = cssStr;
            document.getElementsByTagName("head").item(0).appendChild(style);
        }
    }

    var MAX_SIZE = 200;

    function ImageCrop(config){
        this.zoomMin = 0.1; //最小比例
        this.zoomMax = 10; //最大比例
        this.wrapWidth = 280;
        this.wrapHeight = 260;
        this.gripMinX = 0;
        this.gripMaxX = 189;
        this.originalWidth = 0;
        this.originalHeight = 0;
        this.originalLeft = 0;
        this.origianlTop = 0;
        this._construct(config);
    }

    ImageCrop.prototype = {
        /**
         * 构建方法
         * @param config
         * @private
         */
        _construct:function(config){
            this.eventTarget = config.target;
            this.cropWidth = config.width || 140;
            this.cropHeight = config.height || 140;
            this.ratio = 1;
            if(this.cropWidth > MAX_SIZE || this.cropHeight > MAX_SIZE){
                if(this.cropWidth > this.cropHeight){
                    this.ratio = MAX_SIZE/this.cropWidth;
                    this.cropWidth = MAX_SIZE;
                    this.cropHeight *= this.ratio;
                }
                else{
                    this.ratio = MAX_SIZE / this.cropHeight;
                    this.cropHeight = MAX_SIZE;
                    this.cropWidth *= this.ratio;
                }
            }
            this.offsetX = (this.wrapWidth - this.cropWidth ) / 2;
            this.offsetY = (this.wrapHeight - this.cropHeight) / 2;
            this.destWidth = config.destWidth || this.cropWidth;
            this.destHeight = config.destHeight || this.cropHeight;
            this.onConfirm = config.onConfirm || function(){};
            var parent = config.container || $(document.body);
            this.initHTML(parent);
            this.bindEvent();

        },
        initHTML:function(parent){
            var html = '<div class="crop-container" style="display:block;">'+
                '    <div class="left-box">'+
                '        <div class="crop-wrapper">'+
                '            <div class="crop-preview"><div class="crop-preview-box"></div></div>'+
                '            <img class="crop-target" style="position:relative;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />'+
                '        </div>'+
                '        <div class="crop-tool-bar">'+
                '            <span><a href="javascript:;" class="zoom-tool btn-zoom zoom-out" alt="图片缩小"></a></span>'+
                '            <span class="bar-zoom-box">'+
                '                <span class="zoom-tool bar-zoom"></span>'+
                '                <a href="javascript:;" class= "zoom-tool crop-grip"></a>'+
                '            </span>'+
                '            <span><a href="javascript:;" class="zoom-tool btn-zoom zoom-in"   alt="图片放大"></a></span>'+
                '        </div>'+
                '    </div>'+
                '    <div class="right-box">'+
                '        <div class="image-preview"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>'+
                '        <div class="btn-box"><a class="btn-upload-image" href="javascript:;">图片上传</a></div>'+
                '        <div class="btn-box"><a class="btn-confirm-crop" href="javascript:;">确认裁剪</a></div>'+
                '    </div>'+
                '</div>';
            this.container = $(html);

            this.find(".crop-preview").css({
                width : (this.cropWidth + 4) +"px",
                height: (this.cropHeight + 4) + "px",
                "border-width": (this.offsetY -2) +"px " + (this.offsetX - 2) +"px"
            });

            this.find(".crop-preview-box").css({
                width : (this.cropWidth) +"px",
                height: (this.cropHeight) + "px"
            });

            parent.append(this.container);
        },
        bindEvent:function(){
            this.cropTarget = this.find(".crop-target");
            this.cropGrip = this.find(".crop-grip");
            this.wrapper = this.find(".crop-wrapper");
            var _this = this;
            this.eventTarget.bind("click", function(){
                _this.show();
            });

            this.bindCropGrip();
            this.bindUpload();
            this.find(".btn-zoom").bind("click", function(){
               if($(this).hasClass("zoom-out")){
                    _this.scale(false);
               }
               else if($(this).hasClass("zoom-in")){
                   _this.scale(true);
               }
            });

            var canvas = document.createElement("canvas");
            canvas.width = this.destWidth;
            canvas.height = this.destHeight;

            var context = canvas.getContext("2d");
            this.find(".btn-confirm-crop").bind("click", function(){
                var target = _this.cropTarget.get(0);
                var top = parseInt(target.style.top);
                var left = parseInt(target.style.left);
                var offsetLeft = left - _this.originalLeft;
                var offsetTop = top - _this.origianlTop;
                var scale =  _this.zoom;
                var _left = (_this.zoom * _this.originalWidth - _this.cropWidth) / 2;
                var _top = (_this.zoom * _this.originalHeight - _this.cropHeight) / 2;
                var x = (-_left + offsetLeft) / scale;
                var y = (-_top + offsetTop) /scale;
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.save();
                context.scale(scale, scale);
                context.drawImage(_this.cropTarget.get(0), x, y);
                context.restore();
                var base64Url = canvas.toDataURL("image/png");
                _this.find(".image-preview").find("img").attr("src", base64Url);
                _this.onConfirm(base64Url)
            });

        },
        bindUpload:function(){
            var _this = this;

            this.fileInput = $('<input type="file" accept="image/*" style="position: absolute;left: -999999px;" />');
            this.fileInput.bind("change", function(e){
                if($.trim($(this).val())==""){
                    return ;
                }
                var files = e.target.files || e.dataTransfer.files;
                var file = files[0];

                if(!/^image\//.test(file.type)){
                    alert("请上传图片文件");
                    _this.fileInput.val("");
                    return false;
                }

                //对路径进行压缩
                var reader = new FileReader();
                reader.onload = function(e) {
                    var image = new Image();
                    image.onload = function(){
                        _this.cropTarget.attr("src", this.src);
                        _this.initImage(this.width, this.height);

                    };
                    image.src = e.target.result;
                }
                reader.readAsDataURL(file);
            });

            var _this = this;
            this.find(".btn-upload-image").bind("click", function(){
                _this.fileInput.trigger("click");
            });
        },
        initImage:function(width, height){

            var _this = this;
            var top = -(height - this.wrapHeight) / 2;
            var left =  -(width - this.wrapWidth) / 2;
            this.originalLeft = left;
            this.origianlTop = top;
            this.originalWidth = width;
            this.originalHeight = height;
            this.cropTarget.get(0).style.transform = "";
            this.cropTarget.css({
                top:top,
                left:left
            });
            this.zoomMin = 1;
            this.gripPos = 5;
            this.zoom = 1;
            if (width > this.cropWidth) {
                this.zoomMin = this.cropWidth / width;
            }
            this.zoomMax = this.zoomMin > 0.25 ? 8.0 : 4.0 / Math.sqrt(this.zoomMin);
            this.cropGrip.css({
                "left":(this.gripMinX + (this.gripPos / 10 * (this.gripMaxX - this.gripMinX))) + "px"
            });

            var target = this.cropTarget.get(0);
            Drag.init(this.wrapper.get(0), target);
            target.onDrag = function(){
                _this.rePosition();
            };
        },
        rePosition:function(){
            var target = this.cropTarget.get(0);
            var width = this.originalWidth;
            var height = this.originalHeight;
            var offsetLeft = parseInt(this.cropTarget.css("left"));
            var offsetTop = parseInt(this.cropTarget.css("top"));
            var _width = width * this.zoom;
            var _height = height * this.zoom;
            var _x = (_width - width ) / 2;
            var _y = (_height - height) / 2;

            var maxX = Math.max(this.offsetX, this.offsetX + this.cropWidth - _width) + _x;
            var minX = Math.min(this.offsetX + this.cropWidth - _width, this.offsetX) + _x;

            if (offsetLeft > maxX) target.style.left = maxX + 'px';
            else if (offsetLeft < minX) target.style.left = minX + 'px';

            var maxY = Math.max(this.offsetY, this.offsetY + this.cropHeight - _height) + _y;
            var minY = Math.min(this.offsetY + this.cropHeight - _height, this.offsetY) + _y;

            if (offsetTop > maxY) target.style.top = maxY + 'px';
            else if (offsetTop < minY) target.style.top = minY + 'px';
        },
        scale:function(flag){
            if (flag) {
                this.zoom = this.zoom * 1.5;
            } else {
                this.zoom = this.zoom / 1.5;
            }
            if (this.zoom < this.zoomMin) this.zoom = this.zoomMin;
            if (this.zoom > this.zoomMax) this.zoom = this.zoomMax;
            this.imageResize(this.zoom);
            this.gripPos = 5 * (Math.log(this.zoom * this.zoomMax) / Math.log(this.zoomMax));
            this.cropGrip.css({
                left:(this.gripMinX + (this.gripPos / 10 * (this.gripMaxX - this.gripMinX))) + "px"
            });
            this.rePosition();
        },
        bindCropGrip:function(){
            var _this = this;

            var cropGrip = this.cropGrip.get(0);
            Drag.init(cropGrip, cropGrip);
            cropGrip.onDrag = function (clientX, clientY) {
                var offsetX = clientX;
                if (clientX < _this.gripMinX) {
                    cropGrip.style.left = _this.gripMinX + "px";
                    offsetX = _this.gripMinX;
                }
                if (clientX > _this.gripMaxX) {
                    cropGrip.style.left = _this.gripMaxX + "px";
                    offsetX = _this.gripMaxX;
                }
                cropGrip.style.top = 0;
                var x = (offsetX - _this.gripMinX) * 10 / (_this.gripMaxX - _this.gripMinX);
                var zoom = Math.pow(_this.zoomMax, x / 5) / _this.zoomMax;
                if (zoom < _this.zoomMin) zoom = _this.zoomMin;
                if (zoom > _this.zoomMax) zoom = _this.zoomMax;
                _this.imageResize(zoom);
                _this.rePosition();
            }
        },
        imageResize:function(zoom){
            this.zoom = zoom;
            this.cropTarget.get(0).style.transform = "scale("+zoom+")";
        },
        show:function(){
            this.container.show();
        },
        hide:function(){
            this.container.hide();
        },
        find:function(selector){
            return $(selector, this.container);
        }
    };

    $.fn.imageCrop = function(config){
        return this.each(function(){
            new ImageCrop($.extend({
                target:$(this)
            },config||{}));
        });
    };

    createStyle('.crop-container{width:480px;height:300px;overflow:hidden;margin:10px auto;border:1px solid #e0e0e0;border-radius:5px;padding:10px}.zoom-tool{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAASCAYAAAGWfdOKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjIzMDY1QUQ4QzEzMTFFNUJGQTk5MTg5Q0Q5RjA1NjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjIzMDY1QUU4QzEzMTFFNUJGQTk5MTg5Q0Q5RjA1NjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MjMwNjVBQjhDMTMxMUU1QkZBOTkxODlDRDlGMDU2OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MjMwNjVBQzhDMTMxMUU1QkZBOTkxODlDRDlGMDU2OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiaUw1sAAAjASURBVHjaYvwPBAy0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);background-repeat:no-repeat}.left-box{float:left;height:320px;width:292px;overflow:hidden}.crop-wrapper{border:2px solid #888;width:280px;height:260px;overflow:hidden;position:relative;margin:4px;cursor:pointer;float:left}.crop-preview{width:144px;height:144px;border-color:#ccc;border-style:solid;border-width:58px 68px;position:absolute;z-index:1;opacity:.75}.crop-preview-box{width:140px;height:140px;border:2px solid #e0e0e0}.crop-tool-bar{width:252px;padding:4px 20px;height:20px;position:relative;overflow:hidden}.bar-zoom-box{position:relative;width:200px;display:inline-block}.crop-grip{position:absolute;z-index:100;left:100%;top:0;cursor:pointer;width:11px;height:18px;display:inline-block;background-position:-287px 0}.right-box{float:right;width:144px;padding:8px;height:280px}.right-box .image-preview{height:166px;width:144px;margin:8px auto;overflow:hidden;text-align:center;}.image-preview img{border:2px #eee solid;max-height:100%;max-width:140px;}.right-box .btn-box{height:50px;text-align:center}.right-box .btn-box a{display:inline-block;width:100px;padding:8px;text-align:center;border-radius:8px;text-decoration:none;border:1px solid #efefef;color:#FFF;font-size:14px;background:#80b6e7}.right-box .btn-box a:hover{background:#5498db}.btn-zoom{width:18px;height:18px;display:inline-block}.bar-zoom{width:200px;height:18px;display:inline-block}.zoom-out{background-position:-224px 0}.zoom-out:hover{background-position:-203px 0}.zoom-in{background-position:-266px 0}.zoom-in:hover{background-position:-245px 0}');

})(jQuery);