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);
