ADS图像缩放与剪裁（只是完成了前台的功能，传送数据到后台的功能待完成）

HTML Code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Image Editor Test Pages</title>
    <style>
        ul{ list-style: none; }
        li {  400px; }
        form {
            margin-bottom: 1em;
            padding-bottom: 1em;
            border-bottom: 2px solid gray;
        }
        form div {
            clear: both;
        }

        img {
            margin: 0;
            border: 1px solid gray;
            padding: 4px;
             23%;
            float: left;
            clear: none;
        }

        fieldset {
            float: right;
             60%;
            margin-bottom: 1em;
            border: 1px dotted gray;
        }

        legend {
            font-size: 0.95em;
        }

        label {
            display: block;
            font-weight: bold;
        }

        .buttons {
            text-align: center;
        }

        form.ADSImageEditorModified {
            margin: 10px;
            padding: 0;
            border: 0;
        }
        form.ADSImageEditorModified * {
            position: absolute;
            left: -2000px;
        }

        form.ADSImageEditorModified img {
            position: inherit;
            left: auto;
        }


        li {
            list-style:none;
            margin:30px;
            overflow:hidden;
            zoom:1;
        }
        li img {
            float:left;
            270px;
            height:400px;
            display:inline;
            margin-right:30px;
        }
    </style>
</head>
<body>
<h1>Edit Your Images </h1>
<ul>
    <li>
        <form method="post" action="" class="ADSImageEditor">
            <img id="mintImage" src="images/mint.jpg" alt="">
            <fieldset>
                <legend>New Size</legend>
                <div>
                    <label for="newWidth">Width</label>
                    <input id="newWidth" name="newWidth" type="text">
                </div>
                <div>
                    <label for="newHeight">Height</label>
                    <input id="newHeight" name="newHeight" type="text">
                    <p>The width and height applies to the original uncropped image</p>
                </div>
            </fieldset>
            <fieldset>
                <legend>Trim Edges</legend>
                <div>
                    <label for="cropTop">Top</label>
                    <input id="cropTop" name="cropTop" type="text">
                </div>
                <div>
                    <label for="cropRight">Rigt</label>
                    <input name="cropRight" id="cropRight" type="text">
                </div>
                <div>
                    <label for="cropLeft">Left</label>
                    <input name="cropLeft" id="cropLeft" type="text">
                </div>
            </fieldset>
            <div class="buttons">
                <input value="Apply" type="submit">
                <input value="Reset" type="reset">
            </div>
        </form>
    </li>
    <li>
        <form action=""  class="ADSImageEditor">
            <img id="babyImage" src="images/baby.jpg" alt="">
            <fieldset>
                <legend>New Size</legend>
                <div>
                    <label for="newWidth2">Width</label>
                    <input id="newWidth2" name="newWidth" type="text">
                </div>
                <div>
                    <label for="newHeight2">Height</label>
                    <input name="newHeight" id="newHeight2" type="text">
                    <p>The width and height applies to the original uncropped image</p>
                </div>
            </fieldset>
            <fieldset>
                <legend>Trim Edges</legend>
                <div>
                    <label for="cropTop2">Top</label>
                    <input id="cropTop2" name="cropTop" type="text">
                </div>
                <div>
                    <label for="cropRight2">Rigt</label>
                    <input name="cropRight" id="cropRight2" type="text">
                </div>
                <div>
                    <label for="cropLeft2">Left</label>
                    <input name="cropLeft" id="cropLeft2" type="text">
                </div>
            </fieldset>
            <div class="buttons">
                <input value="Apply" type="submit">
                <input value="Reset" type="reset">
            </div>
        </form>
    </li>
</ul>
<!--
<script src="../ADS.js"></script>
<script src="../myLogger.js"></script>
<script src="imageEditor.js"></script>
-->
<script src="imageEditor-test.js"></script>
<script>

</script>
</body>
</html>


JS Code:
/**
 * mageEditor-test.js
 * User: ldp
 * Date: 12-12-22
 * project: 图像缩放与剪裁
 */

(function () {
    if (!window.ADS) {
        window.ADS = {};
    }

    function addEvent(node, type, listener) {
        if (node.addEventListener) {
            node.addEventListener(type, listener, false);
            return true;
        } else if (node.attachEvent) {
            node['e' + type + listener] = listener;
            node[type + listener] = function () {
                node['e' + type + listener](window.event);
            };
            node.attachEvent('on' + type, node[type + listener]);
            return true;
        } else {
            return false;
        }
    }

    window.ADS.addEvent = addEvent;

    function addLoadEvent(loadEvent, waitForImages) {
        //如果等待标记是true则使用常规的添加事件的方法
        if (waitForImages) {
            return addEvent(window, 'load', loadEvent);
        }

        //否则使用一些不同的方式包装loadEvent()方法
        //以便为this关键字制定正确的内容，同时确定
        //事件不会被执行两次
        var init = function () {
            //如果这个函数已经被调用过了则返回
            if (arguments.callee.done) {
                return;
            }

            //标记这个函数以便检测它是否运行过
            arguments.callee.done = true;

            //在document的环境中运行载入事件
            loadEvent.apply(document, arguments);
        };

        //为DOMContentLoaded事件注册事件侦听器
        if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', init, false);
        }

        //对于safari，使用setInterval()函数检测
        //document是否载入完成
        if (/WebKit/i.test(navigator.userAgent)) {
            var _timer = setInterval(function () {
                if (/loaded|complete/.test(document.readyState)) {
                    clearInterval(_timer);
                    init();
                }
            }, 10);
        }

        //对于IE（使用条件注释）
        //附加一个在载入过程最后执行的脚本
        //并检测该脚本是否载入完成
        /*@cc_on @*/
        /*@if (@_win32)
         document.write("<script id=_ie_onload defer src=javascript:void(0)><\/script>");
         var script = document.getElementById('_ie_onload');
         script.onreadystatechange = function(){
         if(this.readyState === 'complete'){
         init();
         }
         };
         /*@end @*/
        return true;
    }

    window.ADS.addLoadEvent = addLoadEvent;

    function removeEvent(node, type, listener) {
        if (node.removeEventListener) {
            node.removeEventListener(type, listener, false);
            return true;
        } else if (node.detachEvent) {
            node.detachEvent('on' + type, node[type + listener]);
            node[type + listener] = null;
            return true;
        }
        return false;
    }

    window.ADS.removeEvent = removeEvent;

    function getEvent(event) {
        return event || window.event;
    }

    window.ADS.getEvent = getEvent;

    function getPointerPositionInDocument(event) {
        event = event || getEvent(event);
        var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
        var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
        return {
            x: x,
            y: y
        };
    }

    window.ADS.getPointerPositionInDocument = getPointerPositionInDocument;

    function stopPropagation(event) {
        event = event || getEvent(event);
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

    window.ADS.stopPropagation = stopPropagation;

    function preventDefault(event) {
        event = event || getEvent(event);
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }

    window.ADS.preventDefault = preventDefault;

    function getElementsByClassName(searchClass, node, tag) {
        if (document.getElementsByClassName) {
            var nodes = (node || document).getElementsByClassName(searchClass),
                result = nodes;
            if (tag !== undefined) {
                result = [];
                for (var i = 0; node = nodes[i]; i++) {
                    if (tag !== '*' && node.tagName.toLowerCase() === tag.toLowerCase()) {
                        result.push(node);
                    } else if (tag === '*') {
                        return nodes;
                    }
                }
            }
            return result;
        } else {
            node = node || document;
            tag = tag || '*';
            var classes = searchClass.split(' '),
                elements = node.getElementsByTagName(tag),
                patterns = [],
                returnElements = [],
                current,
                match;
            var i = classes.length;
            while (--i >= 0) {
                patterns.push(new RegExp('(^|\\s)' + classes[i] + '(\\s|$)'));
            }
            var j = elements.length;
            while (--j >= 0) {
                current = elements[j];
                match = false;
                for (var k = 0, kl = patterns.length; k < kl; k++) {
                    match = patterns[k].test(current.className);
                    if (!match) break;
                }
                if (match) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        }
    }

    window.ADS.getElementsByClassName = getElementsByClassName;

    function getWinSize() {
        var de = document.documentElement;
        return {
             (window.innerWidth || (de && de.clientWidth) || document.body.clientWidth),
            height: (window.innerHeight || (de && de.clientHeight) || document.bodu.clientHeight)
        };
    }

    window.ADS.getWinSize = getWinSize;

    function setStyleById(element, styles) {
        for (var prop in styles) {
            if (!styles.hasOwnProperty(prop)) {
                continue;
            }
            if (element.style.setProperty) {
                element.style.setProperty(uncamelize(prop, '-'), styles[prop], null);
            } else {
                element.style[camelize(prop)] = styles[prop];
            }
        }
        return true;
    }

    window.ADS.setStyle = setStyleById;
    window.ADS.setStyleById = setStyleById;

    function camelize(s) {
        return s.replace(/-(\w)/g, function (strMatch, p1) {    //strMatch为正则匹配的字符
            //p1为\w匹配的一个字符
            return p1.toUpperCase();
        });
    }

    window.ADS.camelize = camelize;

    function uncamelize(property, splitChar) {
        return property.replace(/([a-z])([A-Z])/, '$1' + splitChar + '$2').toLowerCase();
    }

    window.ADS.uncamelize = uncamelize;


})();

/*------------- ImageEditor   ------------------*/
(function () {
    /**
     * 返回一个对象，以所提供元素的宽度，高度
     * 顶部边距和左侧边距作为属性
     * @param {Element} e
     * @return {Object}
     */
    function getDimensions(e) {
        return {
            top: e.offsetTop,
            left: e.offsetLeft,
             e.offsetWidth,
            height: e.offsetHeight
        };
    }

    /**
     * 设置并自动匹配px单位的css属性
     * @param {Element} e 元素
     * @param {Object} dim 包含css属性和值的对象
     * @param {Boolean} updateMsg 是否显示尺寸信息
     */
    function setNumericStyle(e, dim, updateMsg) {
        updateMsg = updateMsg || false;
        var style = {};
        for (var i in dim) {
            if (!dim.hasOwnProperty(i)) {
                continue;
            }
            style[i] = (dim[i] || '0') + 'px';
        }
        ADS.setStyle(e, style);
        if (updateMsg) {
            ImageEditor.elements.cropSizeDisplay.firstChild.nodeValue = dim.width + ' x ' + dim.height;
        }
    }

    /**
     * 构造器
     */
    function ImageEditor() {
    }

    ImageEditor.info = {
        resizeCropArea: false,      // 当为true时启动剪裁区域拖动，否则只是缩放
        pointerStart: null,     // 记录开始时的指针x和y值
        resizeeStart: null,     // 记录开始时黑色半透明层下的图片的偏移属性
        cropAreaStart: null,        // 记录开始时剪裁区域的偏移属性
        imgSrc: null        // 图片地址
    };

    ImageEditor.elements = {
        backdrop: null,     // 背景幕
        editor: null,       // 编辑器
        resizee: null,      // 图片
        resizeeCover: null,     // 半透明黑色背景层
        resizeHandle: null,     // 图片缩放手柄
        cropArea: null,     // 裁剪区域层
        resizeeClone: null,     // 裁剪区域的明亮图片
        cropSizeDisplay: null,      // 包含裁剪尺寸信息的元素
        cropResizeHandle: null,     // 裁剪缩放手柄
        saveHandle: null,       // 保存手柄
        cancelHandle: null      // 取消手柄
    };

    // 这个方法会按照需要注册事件及修改DOM
    // 它会在window载入时自动运行
    ImageEditor.load = function (event) {
        // 取得页面中所有带ADSImageEditor类名的表单元素
        var forms = ADS.getElementsByClassName('ADSImageEditor', document, 'form');
        // 在符合条件的表单中查找图像
        for (var i = 0, len = forms.length; i < len; i++) {
            // 查找表单中的图像
            var images = forms[i].getElementsByTagName('img');
            if (!images[0]) {
                // 这个表单中不包含图像，跳过
                continue;
            }

            // 为图像添加imageEditor.imgeClick事件
            ADS.addEvent(images[0], 'click', ImageEditor.imageClick);

            // 修改类名以便CSS按照需要修改其样式
            forms[i].className += ' ADSImageEditorModified';
        }
    };

    ImageEditor.unload = function (event) {
        // 移除编辑及背景幕（backdrop）
        document.body.removeChild(ImageEditor.elements.backdrop);
        document.body.removeChild(ImageEditor.elements.editor);
    };

    ImageEditor.imageClick = function (event) {
        // 创建新的js Image对象
        // 以便确定图像的宽度和高度
        var image = new Image();
        // this引用被单击的图像元素
        image.src = ImageEditor.info.imgSrc = this.src;

        // 为放置背景幕和居中编辑器而取得页面大小
        var windowSize = ADS.getWinSize();

        /*
         Build the DOM structure and append it to the document
         This will reproduce the following markup with size based
         around the clicked image's size:

         <div><!-- backdrop --></div>
         <div>
         <!-- editor -->
         <div><!-- resize handle --></div>
         <img src="/path/to/image.jpg">
         <div><!-- translucent cover --></div>
         <div>
         <!-- crop area -->
         <img src="/path/to/image.jpg">
         <div><!-- crop size display --></div>
         <div><!-- crop handle --></div>
         <div><!-- save handle --></div>
         <div><!-- cancel handle --></div>
         </div>
         </div>
         */

        // 创建背景幕div，并使其撑满整个页面
        var backdrop = document.createElement('div');
        backdrop.id = 'backdrop';
        ImageEditor.elements.backdrop = backdrop;
        ADS.setStyle(backdrop, {
            'width': '100%',
            'height': '100%',
            'position': 'absolute',
            'background-color': 'black',
            'opacity': 0.8,
            'filter': 'alpha(opacity=80)',
            'z-index': 10000
        });
        setNumericStyle(backdrop, {
            'left': 0,
            'top': 0
        });

        // 创建编辑器div以包含编辑工具的GUI
        var editor = document.createElement('div');
        editor.id = 'editor';
        ImageEditor.elements.editor = editor;
        ADS.setStyle(editor, {
            'position': 'absolute',
            'z-index': 10001
        });
        setNumericStyle(editor, {
            'left': Math.ceil((windowSize.width - image.width) / 2),
            'top': Math.ceil((windowSize.height - image.height) / 2),
            'width': image.width,
            'height': image.height
        });

        // 创建缩放手柄
        var resizeHandle = document.createElement('div');
        resizeHandle.id = 'resizeHandle';
        ImageEditor.elements.resizeHandle = resizeHandle;
        ADS.setStyle(resizeHandle, {
            'position': 'absolute',
            'background': 'url(interface/handles.gif) no-repeat 0 0'
        });
        setNumericStyle(resizeHandle, {
            'right': -10,
            'bottom': -10,
            'width': 28,
            'height': 28
        });

        // 创建可缩放的图像
        var resizee = document.createElement('img');
        resizee.id = 'resizee';
        ImageEditor.elements.resizee = resizee;
        resizee.src = ImageEditor.info.imgSrc;
        ADS.setStyle(resizee, {
            'position': 'absolute',
            'margin': 0,
            'padding': 0,
            'border': 0
        });
        setNumericStyle(resizee, {
            'left': 0,
            'top': 0,
            'width': image.width,
            'height': image.height
        });

        // 创建半透明的蒙板（cover）
        var resizeeCover = document.createElement('div');
        resizeeCover.id = 'resizeeCover';
        ImageEditor.elements.resizeeCover = resizeeCover;
        ADS.setStyle(resizeeCover, {
            'position': 'absolute',
            'background-color': 'black',
            'opacity': 0.8,
            'filter': 'alpha(opacity=80)'
        });
        setNumericStyle(resizeeCover, {
            'left': 0,
            'top': 0,
            'width': image.width,
            'height': image.height
        });

        // 创建裁剪大小显示区域
        var cropSizeDisplay = document.createElement('span');
        cropSizeDisplay.id = 'cropSizeDisplay';
        ImageEditor.elements.cropSizeDisplay = cropSizeDisplay;
        ADS.setStyle(cropSizeDisplay, {
            'position': 'absolute',
            'background-color': 'black',
            'color': 'white'
        });
        setNumericStyle(cropSizeDisplay, {
            'top': 0,
            'left': 0,
            'padding': 4,
            'font-size': 12,
            'line-height': 14
        });
        cropSizeDisplay.appendChild(
            document.createTextNode('size:')
        );

        // 创建裁剪区域容器
        var cropArea = document.createElement('div');
        cropArea.id = 'cropArea';
        ImageEditor.elements.cropArea = cropArea;
        ADS.setStyle(cropArea, {
            'position': 'absolute',
            'overflow': 'hidden'
        });
        setNumericStyle(cropArea, {
            'left': 0,
            'Top': 0,
            'width': image.width,
            'height': image.height
        }, true);

        // 在剪裁区域中创建图像的副本
        var resizeeClone = resizee.cloneNode(false);
        resizeeClone.id = 'resizeeClone';
        ImageEditor.elements.resizeeClone = resizeeClone;

        // 创建裁剪缩放手柄
        var cropResizeHandle = document.createElement('a');
        cropResizeHandle.id = 'cropResizeHandle';
        cropResizeHandle.href = 'javascript:void(0);';
        ImageEditor.elements.cropResizeHandle = cropResizeHandle;
        ADS.setStyle(cropResizeHandle, {
            'position': 'absolute',
            'background': 'url(interface/handles.gif) no-repeat 0 0'
        });
        setNumericStyle(cropResizeHandle, {
            'right': 0,
            'bottom': 0,
            'width': 18,
            'height': 18
        });

        // 创建保存手柄
        var saveHandle = document.createElement('a');
        saveHandle.id = 'saveHandle';
        saveHandle.href = 'javascript:void(0);';
        ImageEditor.elements.saveHandle = saveHandle;
        ADS.setStyle(saveHandle, {
            'position': 'absolute',
            'background': 'url(interface/handles.gif) no-repeat -40px 0'
        });
        setNumericStyle(saveHandle, {
            'left': 0,
            'bottom': 0,
            'width': 16,
            'height': 18
        });

        // 创建取消缩放手柄
        var cancelHandle = document.createElement('a');
        cancelHandle.id = 'cancelHandle';
        ImageEditor.elements.cancelHandle = cancelHandle;
        ADS.setStyle(cancelHandle, {
            'position': 'absolute',
            'background': 'url(interface/handles.gif) no-repeat -29px -11px',
            'cursor': 'pointer'
        });
        setNumericStyle(cancelHandle, {
            'right': 0,
            'top': 0,
            'width': 18,
            'height': 16
        });

        // 添加到DOM文档里
        document.body.appendChild(backdrop);
        document.body.appendChild(editor);
        editor.appendChild(resizeHandle);
        editor.appendChild(resizee);
        editor.appendChild(resizeeCover);
        editor.appendChild(cropArea);
        cropArea.appendChild(resizeeClone);
        cropArea.appendChild(cropSizeDisplay);
        cropArea.appendChild(cropResizeHandle);
        cropArea.appendChild(saveHandle);
        cropArea.appendChild(cancelHandle);

        // 向DOM元素添加事件

        // 缩放手柄的翻转图
        ADS.addEvent(resizeHandle, 'mouseover', function (event) {
            ADS.setStyle(this, {
                'background-position': '0 -29px'
            });
        });
        ADS.addEvent(resizeHandle, 'mouseout', function (event) {
            ADS.setStyle(this, {
                'background-position': '0 0'
            });
        });

        // 裁剪手柄的翻转图
        ADS.addEvent(cropResizeHandle, 'mouseover', function (event) {
            ADS.setStyle(this, {
                'background-position': '0px -29px'
            });
        });
        ADS.addEvent(cropResizeHandle, 'mouseout', function (event) {
            ADS.setStyle(this, {
                'background-position': '0px 0px'
            });
        });

        // 保存手柄的翻转图
        ADS.addEvent(saveHandle, 'mouseover', function (event) {
            ADS.setStyle(this, {
                'background-position': '-40px -29px'
            });
        });
        ADS.addEvent(saveHandle, 'mouseout', function (event) {
            ADS.setStyle(this, {
                'background-position': '-40px 0px'
            });
        });

        // 取消手柄的翻转图
        ADS.addEvent(cancelHandle, 'mouseover', function () {
            ADS.setStyle(this, {
                'background-position': '-29px -40px'
            });
        });
        ADS.addEvent(cancelHandle, 'mouseout', function () {
            ADS.setStyle(this, {
                'background-position': '-29px -11px'
            });
        });


        // 启动图像缩放事件流
        ADS.addEvent(resizeHandle, 'mousedown', ImageEditor.resizeMouseDown);

        // 启动裁剪区域拖动事件流
        ADS.addEvent(cropArea, 'mousedown', ImageEditor.cropMouseDown);

        // 启动裁剪区域缩放事件流
        ADS.addEvent(cropResizeHandle, 'mousedown', function (event) {
            // 因为会触发上面的事件，设置标记表明启动缩放
            ImageEditor.info.resizeCropArea = true;
        });

        // 防止保存手柄启动裁剪拖动事件流
        ADS.addEvent(saveHandle, 'mousedown', function (event) {
            ADS.stopPropagation(event);
        });
        // 防止取消手柄启动裁剪拖动事件流
        ADS.addEvent(cancelHandle, 'mousedown', function (event) {
            ADS.stopPropagation(event);
        });

        // 在单击保存手柄或双击
        // 裁剪区域时保存图像
        ADS.addEvent(saveHandle, 'click', ImageEditor.saveClick);
        ADS.addEvent(cropArea, 'dblclick', ImageEditor.saveClick);
        // 在单击时取消改变
        ADS.addEvent(cancelHandle, 'click', ImageEditor.cancelClick);

        // 如果窗口大小改变则调正背景幕的大小
        ADS.addEvent(window, 'resize', function (event) {
            var windowSize = ADS.getWinSize();
            setNumericStyle(backdrop, {
                'left': 0,
                'top': 0,
                'width': windowSize.width,
                'height': windowSize.height
            });
        });
    };

    ImageEditor.resizeMouseDown = function (event) {
        // 保存当前位置的尺寸
        ImageEditor.info.pointerStart = ADS.getPointerPositionInDocument(event);
        ImageEditor.info.resizeeStart = getDimensions(
            ImageEditor.elements.resizee
        );
        ImageEditor.info.cropAreaStart = getDimensions(
            ImageEditor.elements.cropArea
        );

        // 添加其余事件以启用拖动
        ADS.addEvent(document, 'mousemove', ImageEditor.resizeMouseMove);
        ADS.addEvent(document, 'mouseup', ImageEditor.resizeMouseUp);

        // 停止事件流
        ADS.stopPropagation(event);
        ADS.preventDefault(event);
    };

    ImageEditor.resizeMouseMove = function (event) {
        var info = ImageEditor.info;

        // 取得当前鼠标指针所在位置
        var pointer = ADS.getPointerPositionInDocument(event);

        // 基于鼠标指针来计算
        // 图像信的宽度和高度
        var width = (info.resizeeStart.width + pointer.x - info.pointerStart.x),
            height = (info.resizeeStart.height + pointer.y - info.pointerStart.y);

        // 最小尺寸是42平方像素
        if (width < 42) {
            width = 42;
        }
        if (height < 42) {
            height = 42;
        }

        // 计算基于原始值的百分比
        var widthPercent = (width / info.resizeeStart.width),
            heightPercent = (height / info.resizeeStart.height);

        // 如果按下了Shift键，则按比例缩放
        if (ADS.getEvent(event).shiftKey) {
            if (widthPercent > heightPercent) {
                heightPercent = widthPercent;
                height = Math.ceil(info.resizeeStart.height * heightPercent);
            } else {
                widthPercent = heightPercent;
                width = Math.ceil(info.resizeeStart.width * widthPercent);
            }
        }

        // 计算裁剪区域的新尺寸
        var cropWidth = Math.ceil(info.cropAreaStart.width * widthPercent),
            cropHeight = Math.ceil(info.cropAreaStart.height * heightPercent),
            cropLeft = Math.ceil(info.cropAreaStart.left * widthPercent),
            cropTop = Math.ceil(info.cropAreaStart.top * heightPercent);

        // 缩放对象
        setNumericStyle(
            ImageEditor.elements.editor,
            {
                'width': width,
                'height': height
            }
        );
        setNumericStyle(
            ImageEditor.elements.resizee,
            {
                'width': width,
                'height': height
            }
        );
        setNumericStyle(
            ImageEditor.elements.resizeeCover,
            {
                'width': width,
                'height': height
            }
        );
        setNumericStyle(
            ImageEditor.elements.resizeHandle,
            {
                'left': (width - 18),
                'top': (height - 18)
            }
        );
        setNumericStyle(
            ImageEditor.elements.cropArea,
            {
                'left': cropLeft,
                'top': cropTop,
                'width': cropWidth,
                'height': cropHeight
            },
            true
        );
        setNumericStyle(
            ImageEditor.elements.resizeeClone,
            {
                'left': (cropLeft * -1),
                'top': (cropTop * -1),
                'width': width,
                'height': height
            }
        );

        // 停止事件流
        ADS.stopPropagation(event);
        ADS.preventDefault(event);
    };

    ImageEditor.resizeMouseUp = function (event) {
        // 移除事件侦听器以停止拖动
        ADS.removeEvent(document, 'mousemove', ImageEditor.resizeMouseMove);
        ADS.removeEvent(document, 'mouseup', ImageEditor.resizeMouseUp);

        // 停止事件流
        ADS.stopPropagation(event);
        ADS.preventDefault(event);
    };

    // 裁剪区域上的mousedown事件侦听器
    ImageEditor.cropMouseDown = function (event) {
        // 包含缩放以限制裁剪区域的移动
        ImageEditor.info.pointerStart = ADS.getPointerPositionInDocument(event);
        ImageEditor.info.cropAreaStart = getDimensions(
            ImageEditor.elements.cropArea
        );

        // 包含缩放以限制裁剪区域的移动
        var resizeeStart = getDimensions(
            ImageEditor.elements.resizee
        );
        ImageEditor.info.maxX = resizeeStart.left + resizeeStart.width;
        ImageEditor.info.maxY = resizeeStart.top + resizeeStart.height;

        ADS.addEvent(document, 'mousemove', ImageEditor.cropMouseMove);
        ADS.addEvent(document, 'mouseup', ImageEditor.cropMouseUp);

        ADS.stopPropagation(event);
        ADS.preventDefault(event);
    };

    // 裁剪区域上的mousemove事件侦听器
    ImageEditor.cropMouseMove = function (event) {
        var pointer = ADS.getPointerPositionInDocument(event);

        if (ImageEditor.info.resizeCropArea) {
            // 缩放裁剪区域
            var width = (
                    ImageEditor.info.cropAreaStart.width
                        + pointer.x
                        - ImageEditor.info.pointerStart.x
                    ),
                height = (
                    ImageEditor.info.cropAreaStart.height
                        + pointer.y
                        - ImageEditor.info.pointerStart.y
                    );

            // 如果按下了Shift键，则按比例缩放
            // 计算基于原始值的百分比
            var widthPercent = (width / ImageEditor.info.cropAreaStart.width),
                heightPercent = (height / ImageEditor.info.cropAreaStart.height);

            if (ADS.getEvent(event).shiftKey) {
                if (widthPercent > heightPercent) {
                    heightPercent = widthPercent;
                    height = Math.ceil(ImageEditor.info.cropAreaStart.height * heightPercent);
                } else {
                    widthPercent = heightPercent;
                    width = Math.ceil(ImageEditor.info.cropAreaStart.width * widthPercent);
                }
            }

            // 检查新位置是否超出了边界
            if (ImageEditor.info.cropAreaStart.left + width > ImageEditor.info.maxX) {
                width = ImageEditor.info.maxX - ImageEditor.info.cropAreaStart.left;
            } else if (width < 36) {
                width = 36;
            }
            if (ImageEditor.info.cropAreaStart.top + height > ImageEditor.info.maxY) {
                height = ImageEditor.info.maxY - ImageEditor.info.cropAreaStart.top
            } else if (height < 36) {
                height = 36;
            }

            setNumericStyle(
                ImageEditor.elements.cropArea,
                {
                    'width': width,
                    'height': height
                },
                true
            );
        } else {
            // 移动裁剪区域
            var left = (
                    ImageEditor.info.cropAreaStart.left
                        + pointer.x
                        - ImageEditor.info.pointerStart.x
                    ),
                top = (
                    ImageEditor.info.cropAreaStart.top
                        + pointer.y
                        - ImageEditor.info.pointerStart.y
                    );

            // 检查新位置是否超出了边界
            // 如有必要则加以限制
            var maxLeft = ImageEditor.info.maxX - ImageEditor.info.cropAreaStart.width,
                maxTop = ImageEditor.info.maxY - ImageEditor.info.cropAreaStart.height;

            if (left < 0) {
                left = 0;
            } else if (left > maxLeft) {
                left = maxLeft;
            }
            if (top < 0) {
                top = 0;
            } else if (top > maxTop) {
                top = maxTop;
            }

            if (ADS.getEvent(event).shiftKey) {
                // 按住shiftKey水平移动
                    setNumericStyle(
                        ImageEditor.elements.cropArea,
                        {
                            'left': left
                        }
                    );
                    setNumericStyle(
                        ImageEditor.elements.resizeeClone,
                        {
                            'left': (left * -1)
                        }
                    );


            } else if(ADS.getEvent(event).ctrlKey){
                // 按住ctrl键垂直移动
                setNumericStyle(
                    ImageEditor.elements.cropArea,
                    {
                        'top': top
                    }
                );
                setNumericStyle(
                    ImageEditor.elements.resizeeClone,
                    {
                        'top': (top * -1)
                    }
                );
            } else {
                setNumericStyle(
                    ImageEditor.elements.cropArea,
                    {
                        'left': left,
                        'top': top
                    }
                );
                setNumericStyle(
                    ImageEditor.elements.resizeeClone,
                    {
                        'left': (left * -1),
                        'top': (top * -1)
                    }
                );
            }


        }
    };

    ImageEditor.cropMouseUp = function (event) {
        // 移除所有事件
        ImageEditor.info.resizeCropArea = false;

        ADS.removeEvent(document, 'mousemove', ImageEditor.cropMouseMove);
        ADS.addEvent(document, 'mouseup', ImageEditor.cropMouseUp);
    };

    ImageEditor.saveClick = function (event) {
        // 此处只是发出一个警告
        alert('This should save the information back to the server.');

        // 如果成功则卸载编辑器
        ImageEditor.unload(event);
    };

    ImageEditor.cancelClick = function (event) {
        if (confirm('Are you sure you want to cancel your changes?')) {
            // 卸载编辑器
            ImageEditor.unload(event);
        }
    };

    window.ADS.ImageEditor = ImageEditor;
})();

ADS.addLoadEvent(ADS.ImageEditor.load);
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/webFrontDev/p/2830180.html