Skip to main content
 首页 » 编程设计

jQuery ADS--图像缩放与剪裁

2022年07月16日130telwanggs
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 { width: 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; 
            width: 23%; 
            float: left; 
            clear: none; 
        } 
 
        fieldset { 
            float: right; 
            width: 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; 
            width: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 { 
            width: (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, 
            width: 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/archive/2012/12/23/2830180.html
  文章来源：
  https://www.itguest.com/post/agc2b1.html
阅读延展