图片编辑canvas

最新推荐文章于 2024-04-28 11:27:28 发布

牛粪与鲜花

最新推荐文章于 2024-04-28 11:27:28 发布

阅读量987

点赞数

文章标签：图片 canvas 图片编辑

本文链接：https://blog.csdn.net/u012463871/article/details/50930856

版权

最近我做了一个图片编辑的控件起初工作需要，就在jquery上找了一个插件来用，费了我好长的功夫，效率上不是很理想，但是为了急着用，所以就张就用了。春节之前有点时间了，就决定自己开发一个：使用canvas来做这个事情。原因是：传统的做法是先把图片上传到服务器上，然后再用<img src=""/>把图片下载到本地，然后用插件获取到截取的参数（x, y, width, height）传到服务器再用图片操作的类来编辑图片。这就决定效率不可能高了。如果改用canvas来干这个事情的话，可以在图片上传到服务器上之前就可以编辑图片。如果不考虑ie8及以下的版本的问题，还可先把图片编辑好了之后再把图片上传，这样效率就高很多。

图片编辑其实不难，就那么两个大的步骤：一，获取图片上要截取的区域的参数（x, y, width, height）; 二，根据参数截取图片。

一，获取要截取的区域的参数：

1. 图片上的用鼠标选取的区域，其实就是一个div ,如图：

这就好像我们用QQ截图一样，选了一个区域，然后这个区域的边上有四方的点，点击拖动这些点就可以改变选取区域的大小。要做到一点的要点是：

1）获取鼠标在图片上的坐标：记录点击按下鼠标时的鼠标的坐标（按下点put），然后获取按着鼠标移动鼠标时的鼠标的坐标（移动点move）。这两个点的位移差就是选取区域的数据data（x, y, width, height）。

2）然后根据数据data，来设置选取区域div的宽高及位置。div使用定位position：absolute的方式来实现。

具体的实现，见代码：

html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>鼠标选取canvas区域</title>
<link rel="stylesheet" type="text/css" href="http://www.tuyin.com/.resources/tyw-module-frame/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://www.tuyin.com/.resources/tyw-module-frame/css/bootstrap-theme.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://www.tuyin.com/.resources/css/usermanager.css" media="screen" />
<link rel="stylesheet" type="text/css" href="canvasEditImg.css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>

</head>
<body>

<div id="controls">
<input type="file" id="selectImg" name="files[]"value="kkk"/>
xValue<input type="text" id="xValue" />
yValue<input type="text" id="yValue" />
wValue<input type="text" id="wValue" />
hValue<input type="text" id="hValue" /><br/>

<script src="mouseSelect3.js" type="text/javascript" ></script>

<img src = 'D:/workspace/imageTest/cut1.jpg' class='canvasEditImage' id = 'img1' style="width:100px;height:100px;"/>
<img src = 'D:/workspace/imageTest/cut2.jpg' class='canvasEditImage' id = 'img2' style="width:100px;height:100px;"/>
<img src = 'D:/workspace/imageTest/cut3.jpg' class='canvasEditImage' id = 'img3' style="width:100px;height:100px;"/>

</div>
<div id="targetImg" class="target_img">
<canvas id="targetCanvas" style="border:1px solid yellow;width:100%;height:100%;">
不支持canvas
</canvas>
</div>
<div id="bg"></div>
<div id="editImg" class="edit_img heheheh show502">
<div class="row hetitle">
<div class="col-md-6 col-xs-6 left50">编辑图片</div>
<div class="col-md-6 col-xs-6 right50" id="hidebtn"><img src="x.png"></div>
</div>
<div id="leftContainer" class="left_container">
<p class="titlep1">已选择图片</p>
<div id="editLeft" class="edit_left">
<div id="selector" class="selector">
<div class="point left_top" id="leftTop"></div>
<div class="point top_middle" id="topMiddle"></div>
<div class="point right_top" id="rightTop"></div>
<div class="point left_middle" id="leftMiddle"></div>
<div class="point right_middle" id="rightMiddle"></div>
<div class="point left_bottom" id="leftBottom"></div>
<div class="point bottom_middle" id="bottomMiddle"></div>
<div class="point right_bottom" id="rightBottom"></div>
<div id="selectorTop" class="selector_border"></div>
<div id="selectorRight" class="selector_border"></div>
<div id="selectorBottom" class="selector_border"></div>
<div id="selectorLeft" class="selector_border"></div>
</div>
<canvas id="leftCanvas" style="border:1px solid blue;width:100%;height:100%;"></canvas>
</div>
</div>

<div id="rightContainer" class="right_container">
<p class="titlep1">封面效果预览</p>
<div id="editRight" class="edit_right">

<canvas id="rightCanvas" style="width:100%;height:20%;"></canvas>
</div>
<div style="text-align:center;margin-top:15px;" class="bgred">
<input type="button" id="resetEdit" class="btn btn-submit inbtn reset_btn" value="重置"/>
<input type="button" id="sureEdit" class="btn btn-submit inbtn sure_btn" value="确认修改"/>
<input type="button" id="cancelEdit" class="btn btn-submit hidebtn inbtn" value="取消"/>
</div>
</div>
</div>

<div style="width:100%;height:800px; border:1px solid;">

</div>
<script type="text/javascript">

var canvasEditImages = {};
var img = new canvasEditImage(window, false, false, false, false, false, "selectImg", true);
img.setTemporaryPdt(document.getElementById("targetCanvas"));// 可选
//img.setAsp(1920 / 255); //如果需要设定宽高比，则设置asp
//img.isDefaultSelector(false); //设置默认选择区，默认值为true。
//方式一：编辑已经存在的图片
$(".canvasEditImage").each(function(index,element){
var id = $(element).attr("id");
var temp = canvasEditImages[id];
if (!temp) {
temp = {};
temp.fillStyle = 'rgba(0,0,0,0.3)';
var tempImg = new Image();
tempImg.src = element.src;
tempImg.id = element.id;
temp.image = tempImg;
temp.dataObj = {};
canvasEditImages[id] = temp;
}
$(element).click(function() {
$("#editImg").css({'display' : "block"});
$("#bg").show();
var thisImg = canvasEditImages[$(this).attr("id")];
img.setImage(thisImg.image); // 第一步：设置image
//img.setAsp(thisImg.asp); // 第二步：如果需要设定宽高比，则设置asp；如果不需要，则跳过此步骤
//img.isDefaultSelector(false); // 第三部：设置默认选择区，默认值为true。当设置为true时，可跳过此步骤
img.dataObj(thisImg.dataObj); // 第四部：设置数据
img.setFillStyle(thisImg.fillStyle);
img.bindEvent(); //最后一步：绑定事件
});
});

//方式二：编辑新上传的图片
$("#selectImg").change(function(e){
$("#editImg").css({'display' : "block"});
var image = new Image();
image.onload = function() {
img.dataObj({});
img.setImage(image);
img.bindEvent();
}
//获取图片路径
if (this.files) {
var file= this.files[0];
var reader=new FileReader();
reader.οnlοad=function(){
// 通过 reader.result 来访问生成的 DataURL
var imgUrl = reader.result;
image.src = imgUrl;
};
reader.readAsDataURL(file);
} else {
//ie9 及以下时获取图片的url
var imgUrl = e.target.value;
var index = imgUrl.lastIndexOf("/");
index = index == -1 ? imgUrl.lastIndexOf("\\") : index;
var name = "";
if (index != -1) {
name = imgUrl.substring(index + 1);
}
image.src = imgUrl;
}
});

function sureEdit() {
var id = img.getImage().id;
var image = canvasEditImages[id];
image.dataObj = img.dataObj();
}

function cancelEdit() {
$("#editImg").css({
'display' : 'none'
});
img.cancelEdit();
}

function resetImg() {
img.resetImg();
}

$("#sureEdit").click(function(){ sureEdit()});
$("#cancelEdit").click(function(){ cancelEdit()});
$("#resetImg").click(function(){resetImg();});

$(".hidebtn").click(function(){
$("#bg").hide();
})
$("#hidebtn").click(function(){
$("#bg").hide();
$("#editImg").hide();
})

</script>


</body>

</html>

css代码canvasEditImg.css：

/* 图片编辑框 csscss start */
canvas{
padding: 0;
behavior: url(ie-css3.htc);
display:block;
}
.selector{
position: absolute;
cursor: crosshair;
display: none;
z-index:888;
}
.edit_img, .edit_left, .edit_right {
margin:0px;
padding:0px;
}
.edit_img {
position: relative;
width:500px;
height:200px;
display : none;
}
.edit_img p {
margin:0 !important
}
.edit_left {
width:400px;
margin-left: 25px;
position:relative;
}
.edit_right {
width: 330px;
margin:0 auto;
}

.left_top, .right_bottom {
cursor : nw-resize;
}
.left_middle, .right_middle {
cursor: e-resize;
}

.left_bottom, .right_top {
cursor: ne-resize;
}

.top_middle, .bottom_middle {
cursor: s-resize;
}

.left_container {
padding: 0 0 10px 20px;
background: #fff;

}
.right_container {
background: #fff;
padding:0 20px 25px 20px;
border-radius:0 0 10px 10px;
}

.point {
position:absolute;
background-color: #333;
border: 1px #EEE solid;
font-size: 1px;
height: 7px;
width: 7px;
}
.selector_border {
background : #FFF url(Jcrop.gif);
position : absolute;
}

#bg{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
z-index:1001;
-moz-opacity:0.7;
opacity:0.70;
filter:alpha(opacity=70);
}
.show502{
display: none;
position: absolute;
top: 15%;
left: 0;
width: 694px;
z-index: 1002;
min-height: 616px;
}
.hetitle{
background:#ca2524;
padding:5px 20px;
border-radius: 10px 10px 0 0;
color:#fff;
}
.left50{
width:50%;
float:left;
}
.right50{
text-align:right;
}
.titlep1{
padding-top:10px;
}

#hidebtn:hover{
cursor:pointer;
}
.inbtn{
width: 84px;
height:37px;
text-align:center;
padding:0!important;
background: #ca2524;
color: #fff;
font-size: 1.1em;
}
.sure_btn {
margin: 0 13px;
}
/* 图片编辑框 css end */

js代码mouseSelect3.js：

/**
* Created by wyf on 2016-3-8.
*/
;//分号为了保证代码合并时不出错
/**
* win : window 必须
* leftCanvasId : 左边canvas的id，可选
* rightCanvasId ：右边canvas的id，可选
* selectAreaId ：选取框div的id，可选
* imgSrc ：原图片的路径或者是原图片的document对象，可选
* imgeInputFileId ：文件选取框<input type='file'/> 的id，可选
* idDefaultEditDalog ：是否使用默认的编辑框，默认为true，，可选
*/
function canvasEditImage(win, dialogId, leftCanvasId, rightCanvasId, selectAreaId, imgSrc, imgeInputFileId, idDefaultEditDalog){

//设置临时（实时）的canvas
this.setTemporaryPdt = function(canvasElement) {
if (canvasElement) {
temporaryCvs = canvasElement;
} else {
temporaryCvs = win.document.createElement("canvas");
}
if(!temporaryCvs.getContext) { G_vmlCanvasManager.initElement(temporaryCvs); }
temporaryCvsContext = temporaryCvs.getContext("2d");
};
//获取临时（实时）的canvas
this.getTemporaryPpdt = function(canvasElement) {
return temporaryCvs;
};

this.isDefaultSelector = function(isDefaultSelectorValue) {
isDefaultSelector = isDefaultSelectorValue;
}
this.getIsDefaultSelector = function(isDefaultSelectorValue) {
return isDefaultSelector;
}
//设置宽高比
this.setAsp = function(aspValue){
asp = aspValue;
};
this.getAsp = function(aspValue){
return asp;
};
// 设置/获取灰层
this.setFillStyle = function(fillStyleValue) {
fillStyle = fillStyleValue;
}
this.getFillStyle = function() {
return fillStyle;
}
// 设置/获取 image
this.setImage = function (imageElement) {
leftImg = imageElement;
}
this.getImage = function () {
return leftImg;
}
// 设置/获取数据
this.dataObj = function(dataObjValue) {
if (dataObjValue) {
cloneDataObj(dataObjValue, dataObj);
}
if (!dataObj.selectRectNote) {
//选取框的数据
dataObj.selectRectNote = {'x' : 0, 'y' : 0, 'width' : 0, 'height' : 0};
}
if (!dataObj.selectRectPdt) {
//selector的数据还原到原图上的数据
dataObj.selectRectPdt = {'x' : 0, 'y' : 0, 'width' : 0, 'height' : 0};
}
selectRectNote = dataObj.selectRectNote,
selectRectPdt = dataObj.selectRectPdt;
selectRect.left = selectRectNote.x, selectRect.top = selectRectNote.y, selectRect.width = selectRectNote.width, selectRect.height = selectRectNote.height;

return cloneDataObj(dataObj, {});
}
// 重置数据
this.resetImg = function() {
this.dataObj({});
initeSelector();
leftCvsContext.drawImage(leftImg, 0, 0, leftImg.width, leftImg.height, 0, 0, leftCvs.width, leftCvsHeight);
rightCvsContext.clearRect(0,0,rightCvs.width,rightCvs.height);
if (temporaryCvs) {
temporaryCvsContext.clearRect(0,0,temporaryCvs.width,temporaryCvs.height);
}
setCanvasSize(rightCvs,rightCvs.width, leftCvsHeight - 30);
createPdt();
}
// 放弃编辑，清空临时数据
this.cancelEdit = function() {
this.dataObj({});
leftCvsContext.clearRect(0,0,rightCvs.width,rightCvs.height);
rightCvsContext.clearRect(0,0,rightCvs.width,rightCvs.height);
if (temporaryCvs) {
temporaryCvsContext.clearRect(0,0,temporaryCvs.width,temporaryCvs.height);
}
};

//宽高比
var asp = false,
isDefaultSelector = true,
idDefaultEditDalog = !idDefaultEditDalog ? idDefaultEditDalog : true,
dataObj = {'selectRectNote' : {}, 'selectRectPdt' : {}},
fillStyle = 'rgba(0,0,0,0.3)',
doc = win.document;

if (idDefaultEditDalog) {
var dialog = win.document.getElementById("editImg");
if (dialog) {
dialog.remove();
}
dialog = "<div id=\"editImg\" class=\"edit_img show502\"><div class=\"row hetitle\"><div class=\"col-md-6 col-xs-6 left50\">编辑图片</div><div class=\"col-md-6 col-xs-6 right50\" id=\"hidebtn\"><img src=\"x.png\"></div></div><div id=\"leftContainer\" class=\"left_container\"><p class=\"titlep1\">已选择图片</p><div id=\"editLeft\" class=\"edit_left\"><div id=\"selector\" class=\"selector\"><div class=\"point left_top\" id=\"leftTop\"></div><div class=\"point top_middle\" id=\"topMiddle\"></div><div class=\"point right_top\" id=\"rightTop\"></div><div class=\"point left_middle\" id=\"leftMiddle\"></div><div class=\"point right_middle\" id=\"rightMiddle\"></div><div class=\"point left_bottom\" id=\"leftBottom\"></div><div class=\"point bottom_middle\" id=\"bottomMiddle\"></div><div class=\"point right_bottom\" id=\"rightBottom\"></div><div id=\"selectorTop\" class=\"selector_border\"></div><div id=\"selectorRight\" class=\"selector_border\"></div><div id=\"selectorBottom\" class=\"selector_border\"></div><div id=\"selectorLeft\" class=\"selector_border\"></div></div><canvas id=\"leftCanvas\" style=\"width:100%;height:100%;\"></canvas></div></div><div id=\"rightContainer\" class=\"right_container\"><p class=\"titlep1\">封面效果预览</p><div id=\"editRight\" class=\"edit_right\"><canvas id=\"rightCanvas\" style=\"width:100%;height:20%;\"></canvas></div><div style=\"text-align:center;margin-top:15px;\" class=\"bgred\"><input type=\"button\" id=\"resetEdit\" class=\"btn btn-submit inbtn reset_btn\" value=\"重置\"/><input type=\"button\" id=\"sureEdit\" class=\"btn btn-submit inbtn sure_btn\" value=\"确认修改\"/><input type=\"button\" id=\"cancelEdit\" class=\"btn btn-submit hidebtn inbtn\" value=\"取消\"/></div></div></div>";
$(doc.body).append(dialog);
};
dialogId = dialogId ? dialogId : "editImg",
selectAreaId = selectAreaId ? selectAreaId : "selector",
leftCanvasId = leftCanvasId ? leftCanvasId : "leftCanvas",
rightCanvasId = rightCanvasId ? rightCanvasId : "rightCanvas",
leftCvs = doc.getElementById(leftCanvasId),
rightCvs = doc.getElementById(rightCanvasId);
//实时canvas，实时的原图截取
var temporaryCvs, temporaryCvsContext;

var selector = doc.getElementById(selectAreaId);

var leftTop = doc.getElementById("leftTop"), topMiddle = doc.getElementById("topMiddle"), rightTop = doc.getElementById("rightTop"),
leftMiddle = doc.getElementById("leftMiddle"), rightMiddle = doc.getElementById("rightMiddle"), leftBottom = doc.getElementById("leftBottom"),
bottomMiddle = doc.getElementById("bottomMiddle"), rightBottom = doc.getElementById("rightBottom"),
selectorTop = doc.getElementById("selectorTop"), selectorRight = doc.getElementById("selectorRight"), selectorBottom = doc.getElementById("selectorBottom"), selectorLeft = doc.getElementById("selectorLeft");

var isLeftTopMouseDown = false, isTopMiddleMouseDown = false, isRightTopMouseDown = false,
isLeftMiddleMouseDown = false, isRightMiddleMouseDown = false, isLeftBottomMouseDown = false,
isBottomMiddleMouseDown = false, isRightBottomMouseDown = false;

if(!leftCvs.getContext) { G_vmlCanvasManager.initElement(leftCvs); }
if(!rightCvs.getContext) { G_vmlCanvasManager.initElement(rightCvs); }

var leftCvsContext = leftCvs.getContext("2d"),
rightCvsContext = rightCvs.getContext("2d"),
leftImg = new Image(),
rightImg = new Image();
// 优先使用clientWidth的原因是：当canvas 没有设置width、height属性，
// 而通过使用style来设置width、height时，width与clientWidth会不一致，
// 如果使用width，会产生不可预知的效果，应当使用clientWidth；
// 当display为none时，clientWidth为0，
var leftCvsWidth = leftCvs.clientWidth ? leftCvs.clientWidth : leftCvs.width;
var leftCvsHeight = leftCvs.clientHeight ? leftCvs.clientHeight : leftCvs.height;
var rightCvsWidth = rightCvs.clientWidth ? rightCvs.clientWidth : rightCvs.width;
var rightCvsHeight = rightCvs.clientHeight ? rightCvs.clientHeight : rightCvs.height;

var msdown = {},
//选择区域
selectRect = {},
dragging = false,
rects = false,
isLeftCvsMouseDown = false,
isCallSelectEnd = false,
isSelectorMouseDown = false,
isIniteSelector = true,
//鼠标在selector上的坐标
mouseOnSelectXY = {},
//记录鼠标在leftCvs上的第一次点击时的坐标
leftCvsXY = {},
//selector数据的记录
selectRectNote = dataObj.selectRectNote,
selectRectPdt = dataObj.selectRectPdt;

var _functions = {
//选取开始
selectStart : function(x,y) {
//记录鼠标按下时的坐标
msdown.x = x;
msdown.y = y;

this.showSelector();//显示选取框

dragging = true;
},
//移动选取框
moveSelector: function () {
selector.style.top = selectRect.top + "px";
selector.style.left = selectRect.left + "px";
},
//显示选取框
showSelector:function(){
selector.style.display = "block";
},
//展开选取框
selectorStretch:function(x,y){
isCallSelectEnd = true;
if (isIniteSelector) {
//鼠标按下后一次拖动前，初始化selector
selectRect.left = msdown.x;
selectRect.top = msdown.y;
selectRect.width = 0;
selectRect.height = 0;

selector.style.width = 0;
selector.style.height = 0;
this.moveSelector();//移动选取框

selectRectNote.x = 0;
selectRectNote.y = 0;
selectRectNote.width = 0;
selectRectNote.height = 0;

isIniteSelector = false;
}
selectRect.left = Math.min(x,msdown.x);
selectRect.top = Math.min(y,msdown.y);
if (asp) {
selectRect.height = Math.abs(y-msdown.y);
if (selectRect.top + selectRect.height >= leftCvsHeight) {
selectRect.height = leftCvsHeight - selectRect.top;
}
selectRect.width = selectRect.height * asp;
if (selectRect.left + selectRect.width >= leftCvsWidth) {
selectRect.width = leftCvsWidth - selectRect.left;
selectRect.height = selectRect.width / asp;
selectRect.top = parseInt(selector.style.top);
}
} else {
selectRect.width = Math.abs(x - msdown.x);
selectRect.height = Math.abs(y-msdown.y);
}

this.moveSelector();//移动选取框
this.resizeSelector();//重设选取框

},

//重设选取框大小
resizeSelector:function(){
selector.style.width = selectRect.width + "px";
selector.style.height = selectRect.height + "px";
setPointsToSetSelectorSize();
},
//重置选取框
resetSelector:function(){
selectRect = {top:0,left:0,leftCvsWidth:0,leftCvsHeight:0};
},
//选取结束
selectEnd:function(){
if (selectRect.width <= 0 || selectRect.height <= 0) {
dragging = false;
return;
}
isIniteSelector = true;
isCallSelectEnd = false;

//得出最终结果
createPdt();
//将选取框selector的数据到selectRectNote中
updateSelectRectNote();

this.resetSelector();
dragging = false;
}
}

function createPdt() {
var x = selectRect.left;
var y = selectRect.top;
var w = selectRect.width;
var h = selectRect.height;

//获取原图的选择区域
var xy = getPreviewSize();

if (w > 0 && h > 0) {
//绘制阴影区域
drawFill(xy);
}

rightCvsHeight = rightCvsWidth / (w / h);
//setCanvasSize(rightCvs, rightCvs.width, rightCvsHeight);不能用rightCvs.clientWidth,原因未知
setCanvasSize(rightCvs, rightCvs.width, rightCvsHeight);
rightCvsContext.drawImage(leftImg, xy.x, xy.y, xy.w, xy.h,0,0,rightCvs.width,rightCvs.height);
if (temporaryCvs) {
setCanvasSize(temporaryCvs, xy.w, xy.h);
temporaryCvsContext.drawImage(leftImg, xy.x, xy.y, xy.w, xy.h,0,0, xy.w, xy.h);
}
}

function getPreviewSize() {
//获取原图的选择区域
var xy = {};
var x = selectRect.left,
y = selectRect.top,
w = selectRect.width,
h = selectRect.height,
orgW = leftImg.width,
orgH = leftImg.height;
xy.x = (orgW * x) / leftCvsWidth,
xy.y = (orgH * y) / leftCvsHeight,
xy.h = (orgH * h) / leftCvsHeight,
xy.w = (orgW * w) / leftCvsWidth;
selectRectPdt.x = xy.x, selectRectPdt.y = xy.y, selectRectPdt.width = xy.w, selectRectPdt.height = xy.h;
return xy;
}

// 绘制阴影区域
function drawFill() {
if (rects) {
leftCvsContext.drawImage(leftImg, 0, 0, leftImg.width, leftImg.height,0,0, leftCvs.width, leftCvs.height);
}
rects = getFillRects();
var x,y,w,h;
//ctx.globalAlpha=0.5;
//leftCvsContext.fillStyle="#FF0000";
leftCvsContext.fillStyle = fillStyle;
leftCvsContext.fillRect(rects.a.x, rects.a.y, rects.a.w, rects.a.h);
leftCvsContext.fillRect(rects.b.x, rects.b.y, rects.b.w, rects.b.h);
leftCvsContext.fillRect(rects.c.x, rects.c.y, rects.c.w, rects.c.h);
leftCvsContext.fillRect(rects.d.x, rects.d.y, rects.d.w, rects.d.h);
}

//获取阴影区域的四个部分：a,b,c,d
function getFillRects(xy) {
var sx = selectRect.left,
sy = selectRect.top,
sw = selectRect.width,
sh = selectRect.height,
W = leftCvsWidth,
H = leftCvsHeight;
var a = {}, b = {}, c = {}, d = {};
var x = 0, y = 0, w = W, h = sy;
a.x = x, a.y = y, a.w = w, a.h = h;
x = 0, y = sy, w = sx, h = sh;
b.x = x, b.y = y, b.w = w, b.h = h;
x = sx + sw, y = sy, w = W - sx - sw, h = sh;
c.x = x, c.y = y, c.w = w, c.h = h;
x = 0, y = sy + sh, w = W, h = H - sy - sh;
d.x = x, d.y = y, d.w = w, d.h = h;
var rects = {};
rects.a = a, rects.b = b, rects.c = c, rects.d = d;
return rects;
}

function cloneDataObj(src, target) {
if (src && src.selectRectNote) {
target.selectRectNote = {
'x' : src.selectRectNote.x,
'y' : src.selectRectNote.y,
'width' : src.selectRectNote.width,
'height' : src.selectRectNote.height
};
} else {
target.selectRectNote = {
'x' : 0,
'y' : 0,
'width' : 0,
'height' : 0
};
}
if (src && src.selectRectPdt) {
target.selectRectPdt = {
'x' : src.selectRectPdt.x,
'y' : src.selectRectPdt.y,
'width' : src.selectRectPdt.width,
'height' : src.selectRectPdt.height
};
} else {
target.selectRectPdt = {
'x' : 0,
'y' : 0,
'width' : 0,
'height' : 0
};
}
return target;
}

function mouseUp(e) {
if (isLeftCvsMouseDown && isCallSelectEnd) {
// 选取区域时
e = e ? e : win.event;
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
_functions.selectEnd.call(_functions);
} else {
// 拖拽区域时
updateSelectRectNote();
}
dragging = false;
}
function mousemove(e) {
e = e ? e : win.event;
//阻止浏览器默认事件
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
if(dragging){
//获取鼠标在canvas中的坐标
var xy = clientXYInElement(e,leftCanvasId);
var x = xy.x,y = xy.y;
_functions.selectorStretch.call(_functions,x,y);
}
}

function mousedown(e) {
e = e ? e : win.event;
var xy = clientXYInElement(e,leftCanvasId);
var x = xy.x, y = xy.y;
//阻止浏览器默认事件
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
var isp = isPointMouseDown();
if (isp) {return;}
_functions.selectStart.call(_functions,x,y);
}

function setImgUrl(src) {
if (isString(src)) {
leftImg.src = src;
} else {
leftImg.src = src.src;
}
}

function isString(str){
return (typeof str=='string')&&str.constructor==String;
}

var setCanvasHeight = this.setCanvasHeight = function setCanvasHeight() {
//重新设置高度
var asp = leftImg.width / leftImg.height;
rightCvsHeight = (rightCvsWidth / asp);
setCanvasSize(rightCvs, rightCvsWidth, rightCvsHeight);
leftCvsHeight = (leftCvsWidth / asp);
setCanvasSize(leftCvs, leftCvsWidth, leftCvsHeight);
leftCvsContext.drawImage(leftImg, 0, 0, leftImg.width, leftImg.height, 0, 0, leftCvs.width, leftCvsHeight);
}

//获取鼠标在元素中的坐标
function clientXYInElement(event,id){
var getOffsetXY = function(obj){
var parObj=obj, xy = {}, y = obj.offsetTop, x = obj.offsetLeft;
while(parObj = parObj.offsetParent){
y += parObj.offsetTop;
x += parObj.offsetLeft;
if ($(parObj).css("position") == "fixed") {
isFixed = true;
break;
}
}
xy.x = x;
xy.y = y;
return xy;
};
var oDiv,xy = {};
oDiv=document.getElementById(id);
//id的最远的定位父元素的定位方式为：position : fixed
var isFixed = false;
var offsetXY = getOffsetXY(oDiv);

if (isFixed) {
xy.x = event.clientX - offsetXY.x;
xy.y = event.clientY - offsetXY.y;
} else {
var docleft = doc.documentElement.scrollLeft;
var docTop = doc.documentElement.scrollTop;
docleft = docleft <= 0 ? docleft = doc.body.scrollLeft : docleft;
docTop = docTop <= 0 ? docTop = doc.body.scrollTop : docTop;
var x = (event.clientX - offsetXY.x + docleft) -2;
var y = (event.clientY - offsetXY.y + docTop) - 2;
xy.x = x < 0 ? 0 : x;
xy.y = y < 0 ? 0 : y;
xy.x = x,
xy.y = y;
}
return xy;
}

function setCanvasSize(canvas, width, height) {
canvas.style.width = width + "px";//设置的是canvas的高度
canvas.width = width;//设置context的高度，也就是设置画布的高度
canvas.style.height = height + "px";//设置的是canvas的高度
canvas.height = height;//设置context的高度，也就是设置画布的高度

//在ie8时，canvas内部会使用div来做兼容性，此时需要把这些div的高度设置成和canvas一样的高度
var canvasChilds = canvas.childNodes;
if (canvasChilds) {
for(var i = 0; i < canvasChilds.length; i++) {
//在某些浏览器中canvas.childNodes得到的子元素会包含文本节点等非HTML元素
if (canvasChilds[i].style) {
if (width) {
canvasChilds[i].style.width = width + "px";
}
if (height) {
canvasChilds[i].style.height = height + "px";
}
}
}
}
}

//是否已经有selector边上的拖动点点击了
function isPointMouseDown() {
return !(isLeftTopMouseDown == false && isTopMiddleMouseDown == false && isRightTopMouseDown == false &&
isLeftMiddleMouseDown == false && isRightMiddleMouseDown == false && isLeftBottomMouseDown == false &&
isBottomMiddleMouseDown == false && isRightBottomMouseDown == false);
}

// 拖拽选取框
function mouseMoveSelector(e) {
var isPointMouseDownTemp = isPointMouseDown();
e = e ? e : win.event;
//阻止浏览器默认事件
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
//已经选取了区域，然后在这个区域上按下鼠标，进行拖动这个区域
if (isSelectorMouseDown && !isPointMouseDownTemp) {
var xy = clientXYInElement(e,leftCanvasId);
var left = xy.x - mouseOnSelectXY.x,
top = xy.y - mouseOnSelectXY.y;

//处理选择区域的位置
if (top + selectRectNote.height >= leftCvsHeight) {
selectRect.top = leftCvsHeight - selectRectNote.height;
} else if (top <= 0) {
selectRect.top = 0;
} else {
selectRect.top = top;
}
if (left + selectRectNote.width >= leftCvsWidth) {
selectRect.left = leftCvsWidth - selectRectNote.width;
} else if (left <= 0) {
selectRect.left = 0;
} else {
selectRect.left = left;
}
selectRect.width = selectRectNote.width, selectRect.height = selectRectNote.height;
selectRectNote.x = selectRect.left, selectRectNote.y = selectRect.top;

selector.style.left = selectRect.left + "px";
selector.style.top = selectRect.top + "px";

createPdt();
} else if (isPointMouseDownTemp) {
//已经选取了区域，然后通过selector边上的点的拖动来改变selector的尺寸
var leftCvsXYCurrent = clientXYInElement(e,leftCanvasId);
var rst;
//获取拖拽后的数据
if (isTopMiddleMouseDown || isBottomMiddleMouseDown) {
rst = movePointToSetSelectorHeight(leftCvsXYCurrent);
} else if (isLeftMiddleMouseDown || isRightMiddleMouseDown) {
rst = movePointToSetSelectorWidth(leftCvsXYCurrent);
} else if (isLeftTopMouseDown || isRightTopMouseDown || isLeftBottomMouseDown || isRightBottomMouseDown) {
rst = moveHornPointToSetSelectorSize(leftCvsXYCurrent);
}
// 处理selector的尺寸
selectRect.left = rst.x, selectRect.top = rst.y, selectRect.width = rst.width, selectRect.height = rst.height;
createPdt();
$(selector).css({
'left' : rst.x,
'top' : rst.y,
'width' : rst.width,
'height' : rst.height
});
//处理selector边上的点
setPointsToSetSelectorSize();
}
}

// 当改变selector的数据之后，更新selectRectNote的数据
function updateSelectRectNote() {
selectRectNote.x = selectRect.left;
selectRectNote.y = selectRect.top;
selectRectNote.width = selectRect.width;
selectRectNote.height = selectRect.height;
}

//将selector边上的点的鼠标按下标记全部设置为false
function selectorMovePointMouseDownToFalse() {
isLeftTopMouseDown = false, isTopMiddleMouseDown = false, isRightTopMouseDown = false,
isLeftMiddleMouseDown = false, isRightMiddleMouseDown = false, isLeftBottomMouseDown = false,
isBottomMiddleMouseDown = false, isRightBottomMouseDown = false;
}

//显示选取框的拉伸点（边上的8个点）
function setPointsToSetSelectorSize() {
function pointPosition(point, left, top) {
var index = $(selector).css("z-index");
point.css({
'left': left,
'top' : top,
'z-index' : index + 1
});
}
if ($(selector).width() == 0 || $(selector).height() == 0) {
$(".selector div").css({
'display' : 'none'
});
} else {
$(".selector div").css({
'display' : 'block'
});
var $selector = $(selector),
$leftTop = $(leftTop), $topMiddle = $(topMiddle), $rightTop = $(rightTop),
$leftMiddle = $(leftMiddle), $rightMiddle = $(rightMiddle),
$leftBottom = $(leftBottom), $bottomMiddle = $(bottomMiddle), $rightBottom = $(rightBottom)
$selectorTop = $(selectorTop), $selectorRight = $(selectorRight), $selectorBottom = $(selectorBottom), $selectorLeft = $(selectorLeft);

pointPosition($leftTop, - $leftTop.width() / 2, - $leftTop.height() / 2);
pointPosition($topMiddle, $selector.width() / 2 - $topMiddle.width() / 2, - $topMiddle.height() / 2);
pointPosition($rightTop, $selector.width() - $rightTop.width() / 2, - $rightTop.width() / 2);

pointPosition($leftMiddle, - $leftMiddle.width() / 2, $selector.height() / 2 - $leftMiddle.height() / 2);
pointPosition($rightMiddle, $selector.width() - $rightMiddle.width() / 2, $selector.height() / 2 - $rightMiddle.height() / 2);

pointPosition($leftBottom, - $leftBottom.width() / 2, $selector.height() - $leftBottom.height() / 2);
pointPosition($bottomMiddle, $selector.width() / 2 - $bottomMiddle.width() / 2, $selector.height() - $bottomMiddle.height() / 2);
pointPosition($rightBottom, $selector.width() - $rightBottom.width() / 2, $selector.height() - $rightBottom.height() / 2);

$selectorTop.width($selector.width());$selectorTop.height(1);
$selectorRight.width(1);$selectorRight.height($selector.height());
$selectorBottom.width($selector.width());$selectorBottom.height(1);
$selectorLeft.width(1);$selectorLeft.height($selector.height());

pointPosition($selectorTop, 0, 0);
pointPosition($selectorRight, $selector.width(), 0);
pointPosition($selectorBottom, 0, $selector.height());
pointPosition($selectorLeft, 0, 0);
}
}

//移动border-top 来改变selector的高度
function moveBorderTop(selectRectNote, yReduce, selectorHeight, top) {
if (yReduce > 0) {
//border-top 往下移动
selectorHeight = selectRectNote.height - Math.abs(yReduce);
if (selectorHeight > 0) {
//border-top没有到达border-bottom
top = selectRectNote.y + yReduce;
} else if (selectorHeight == 0) {
//border-top到达border-bottom的位置，与border-bottom在同一位置
top = selectRectNote.y + selectRectNote.height;
} else {
//border-top到达border-bottom的位置，border-bottom往下走
top = selectRectNote.y + selectRectNote.height;
selectorHeight = yReduce - selectRectNote.height;
if (top + selectorHeight >= leftCvsHeight) {
selectorHeight = leftCvsHeight - top;
}
}
} else if (yReduce < 0) {
//border-top 往上移动
selectorHeight = selectRectNote.height + Math.abs(yReduce);
top = selectRectNote.y - Math.abs(yReduce);
} else {
//border-top 没有移动
selectorHeight = selectRectNote.height;
top = selectRectNote.y;
}
return {'top' : top, "selectorHeight" : selectorHeight};
}

//移动border-bottom 来改变selector的高度
function moveBorderBottom(selectRectNote, yReduce, selectorHeight, top) {
if (yReduce > 0) {
//border-bottom 往下移动
selectorHeight = selectRectNote.height + Math.abs(yReduce);
top = selectRectNote.y;
if (top + Math.abs(selectorHeight) >= leftCvsHeight) {
selectorHeight = leftCvsHeight - top;
}
} else if (yReduce < 0) {
// border-bottom 往上移动
selectorHeight = selectRectNote.height - Math.abs(yReduce);
if (selectorHeight >= 0) {
//border-bottom 没有或者刚好到达 border-top
top = selectRectNote.y;
} else {
//border-bottom 已经到达 border-top 的原来的位置， border-top 已经往上移动
selectorHeight = Math.abs(selectorHeight);
top = selectRectNote.y - selectorHeight;
}
} else {
// border-bottom 没有移动
selectorHeight = selectRectNote.height;
top = selectRectNote.y;
}
return {'top' : top, "selectorHeight" : selectorHeight};
}

//移动border-left来改变selector的宽度
function moveBorderLeft(selectRectNote, xReduce, left, selectorWidth) {
if (xReduce > 0) {
//border-left往右移动
selectorWidth = selectRectNote.width - Math.abs(xReduce);
left = selectRectNote.x + xReduce;
if (selectorWidth > 0) {
//border-left 没有到达 border-right

} else if (selectorWidth == 0) {
// border-left 有到达 border-right,与boerder-right重叠在一起
left = selectRectNote.x + selectRectNote.width;
selectorWidth = 0;
} else {
//border-left 有到达 border-right, boerder-right 往右移动
left = selectRectNote.x + selectRectNote.width;
selectorWidth = Math.abs(selectorWidth);
if (selectorWidth + left >= leftCvsWidth) {
//当鼠标在leftCvs外移动时，selectorWidth会异常
selectorWidth = leftCvsWidth - left;
}
}
} else if (xReduce < 0) {
//border-left往左移动
selectorWidth = selectRectNote.width + Math.abs(xReduce);
left = selectRectNote.x - Math.abs(xReduce);
if (left <= 0) {
selectorWidth = selectRectNote.x + selectRectNote.width;
left = 0;
}
} else {
//border-left没有移动
selectorWidth = selectRectNote.width;
left = selectRectNote.x;
}
return {'left' : left, "selectorWidth" : selectorWidth};
}

//移动border-right来改变selector的宽度
function moveBorderRight(selectRectNote, xReduce, left, selectorWidth) {
if (xReduce > 0) {
//border-right往右移动
left = selectRectNote.x;
selectorWidth = selectRectNote.width + xReduce;
if (left + selectorWidth >= leftCvs.width) {
selectorWidth = leftCvs.width - selectRectNote.x;
}
} else if (xReduce < 0) {
//border-right往左移动
left = selectRectNote.x;
selectorWidth = selectRectNote.width - Math.abs(xReduce);
if (selectorWidth < 0) {
//border-right到达border-left,border-left已经往左移动
selectorWidth = Math.abs(selectorWidth);
left = selectRectNote.x - selectorWidth;
} else if (selectorWidth == 0) {
//border-right到达border-left,与border-left重叠在一起
left = selectRectNote.x;
selectorWidth = 0;
} else {
//border-right没有到达border-left
}
} else {
//border-right没有移动
left = selectRectNote.x;
selectorWidth = selectRectNote.width;
}
return {'left' : left, "selectorWidth" : selectorWidth};
}

//移动 topMiddle 或者 bottomMiddle 来改变 selector的高度
function movePointToSetSelectorHeight(leftCvsXYCurrent) {
var yReduce = leftCvsXYCurrent.y - leftCvsXY.y;
var selectorHeight = 0;
var selectorWidth = 0;
var top = 0;
var rst ={};
var w = selectRectNote.width;
if (isTopMiddleMouseDown) {
rst = moveBorderTop(selectRectNote, yReduce, selectorHeight, top);
} else if (isBottomMiddleMouseDown) {
rst = moveBorderBottom(selectRectNote, yReduce, selectorHeight, top);
}
top = rst.top;
selectorHeight = Math.abs(rst.selectorHeight);
if (asp) {
w = selectorHeight * asp;
if (selectRectNote.x + w >= leftCvsWidth) {
w = leftCvsWidth - selectRectNote.x
selectorHeight = w / asp;
top = parseInt(selector.style.top);
}
w = selectorWidth > leftCvsWidth ? leftCvsWidth : w;
}
selectorHeight = selectorHeight > leftCvsHeight ? leftCvsHeight : selectorHeight;
return {'x' : selectRectNote.x, 'y' : top, 'width' : w, 'height' : selectorHeight};
}

//移动 leftMiddle 或者 rightMiddle 来改变 selector 的宽度
function movePointToSetSelectorWidth(leftCvsXYCurrent) {
var xReduce = leftCvsXYCurrent.x - leftCvsXY.x;
var selectorWidth = 0;
var left = selectRectNote.x;
var rst = {};
var h = selectRectNote.height;
if (isLeftMiddleMouseDown) {
rst = moveBorderLeft(selectRectNote, xReduce, left, selectorWidth);
} else if (isRightMiddleMouseDown) {
rst = moveBorderRight(selectRectNote, xReduce, left, selectorWidth);
}
left = rst.left;
selectorWidth = rst.selectorWidth;
if (asp) {
h = Math.abs(rst.selectorWidth / asp);
if (selectRectNote.y + h > leftCvsHeight) {
h = leftCvsHeight - selectRectNote.y;
selectorWidth = h * asp;
left = parseInt(selector.style.left);
}
h = h > leftCvsHeight ? leftCvsHeight : h;
}
selectorWidth = selectorWidth > leftCvsWidth ? leftCvsWidth : selectorWidth;
return {'x' : left, 'y' : selectRectNote.y, 'width' : selectorWidth, 'height' : h};
}

//移动左上角、右上角、左下角、右下角来改变selector的尺寸
function moveHornPointToSetSelectorSize(leftCvsXYCurrent) {
var xReduce = leftCvsXYCurrent.x - leftCvsXY.x;
var selectorWidth = 0;
var left = selectRectNote.x;
var yReduce = leftCvsXYCurrent.y - leftCvsXY.y;
var selectorHeight = 0;
var top = 0;
var rst = {};
if (isLeftTopMouseDown) {
//移动左上角
var moveBorderTopRst = moveBorderTop(selectRectNote, yReduce, selectorHeight, top);
var moveBorderLeftRst = moveBorderLeft(selectRectNote, xReduce, left, selectorWidth);
rst.x = moveBorderLeftRst.left;
rst.y = moveBorderTopRst.top;
rst.w = moveBorderLeftRst.selectorWidth;
rst.h = moveBorderTopRst.selectorHeight;
} else if (isRightTopMouseDown) {
//移动右上角
var moveBorderTopRst = moveBorderTop(selectRectNote, yReduce, selectorHeight, top);
var moveBorderRightRst = moveBorderRight(selectRectNote, xReduce, left, selectorWidth);
rst.x = moveBorderRightRst.left;
rst.y = moveBorderTopRst.top;
rst.w = moveBorderRightRst.selectorWidth;
rst.h = moveBorderTopRst.selectorHeight;
} else if (isLeftBottomMouseDown) {
//移动左下角
var moveBorderLeftRst = moveBorderLeft(selectRectNote, xReduce, left, selectorWidth);
var moveBorderBottomRst = moveBorderBottom(selectRectNote, yReduce, selectorHeight, top);
rst.x = moveBorderLeftRst.left;
rst.y = moveBorderBottomRst.top;
rst.w = moveBorderLeftRst.selectorWidth;
rst.h = moveBorderBottomRst.selectorHeight;
} else if (isRightBottomMouseDown) {
//移动右下角
var moveBorderRightRst = moveBorderRight(selectRectNote, xReduce, left, selectorWidth);
var moveBorderBottomRst = moveBorderBottom(selectRectNote, yReduce, selectorHeight, top);
rst.y = moveBorderBottomRst.top;
rst.h = moveBorderBottomRst.selectorHeight;
rst.x = moveBorderRightRst.left;
rst.w = moveBorderRightRst.selectorWidth;
}

if (asp) {
//按比例放大缩小
var h = Math.abs(rst.h);
var w = h * asp;
top = rst.y;
/*1.第一象限中的点的横坐标(x)大于0，纵坐标(y)大于0。
2.第二象限中的点的横坐标(x)小于0，纵坐标(y)大于0。
3.第三象限中的点的横坐标(x)小于0，纵坐标(y)小于0。
4.第四象限中的点的横坐标(x)大于0，纵坐标(y)小于0。
*/
//鼠标点击的角的对角为参考原点，进行象限划分
if (isRightTopMouseDown) {
//参考原点为：leftBottom
if (leftCvsXYCurrent.y < (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x > selectRectNote.x) {
//位于第一象限
rst.x = selectRectNote.x;
if (rst.x + w >= leftCvsWidth) {
w = leftCvsWidth - rst.x;
h = w / asp;
}
top = leftCvsHeight - (leftCvsHeight - (selectRectNote.y + selectRectNote.height)) - h;
} else if (leftCvsXYCurrent.y > (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x > selectRectNote.x) {
//位于第四象限
top = selectRectNote.y + selectRectNote.height;
rst.x = selectRectNote.x;
if (rst.x + w >= leftCvsWidth) {
w = leftCvsWidth - rst.x;
h = w / asp;
}
} else if (leftCvsXYCurrent.y < (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x < selectRectNote.x) {
//位于第二象限
if (w > selectRectNote.x) {
w = selectRectNote.x;
h = w / asp;
}
rst.x = selectRectNote.x - w;
if (rst.x < 0) {
rst.x = 0;
}
top = leftCvsHeight - (leftCvsHeight - (selectRectNote.y + selectRectNote.height)) - h;
} else if (leftCvsXYCurrent.y > (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x < selectRectNote.x) {
//位于第三象限
top = selectRectNote.y + selectRectNote.height;
if (w > selectRectNote.x) {
w = selectRectNote.x;
h = w / asp;
}
rst.x = selectRectNote.x - w;
if (rst.x < 0) {
rst.x = 0;
}
}
} else if (isLeftTopMouseDown) {
//参考原点为：rightBottom
if (leftCvsXYCurrent.y < (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x > selectRectNote.x + selectRectNote.width) {
//位于第一象限
if (w >= leftCvsWidth -( selectRectNote.x + selectRectNote.width)) {
w = leftCvsWidth -( selectRectNote.x + selectRectNote.width);
h = w / asp;
}
rst.x = selectRectNote.x + selectRectNote.width;
top = selectRectNote.y + selectRectNote.height - h;
} else if (leftCvsXYCurrent.y > (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x > selectRectNote.x + selectRectNote.width) {
//位于第四象限
rst.x = selectRectNote.x + selectRectNote.width;
if (w >= leftCvsWidth -( selectRectNote.x + selectRectNote.width)) {
w = leftCvsWidth -( selectRectNote.x + selectRectNote.width);
h = w / asp;
}
top = selectRectNote.y + selectRectNote.height;
} else if (leftCvsXYCurrent.y < (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x < selectRectNote.x + selectRectNote.width) {
//位于第二象限
rst.x = selectRectNote.x + selectRectNote.width - w;
if (rst.x <= 0) {
rst.x = 0;
w = selectRectNote.x + selectRectNote.width;
h = w / asp;
}
top = selectRectNote.y + selectRectNote.height - h;
} else if (leftCvsXYCurrent.y > (selectRectNote.y + selectRectNote.height) && leftCvsXYCurrent.x < selectRectNote.x + selectRectNote.width) {
//位于第三象限
rst.x = selectRectNote.x + selectRectNote.width - w;
if (rst.x <= 0) {
rst.x = 0;
w = selectRectNote.x + selectRectNote.width;
h = w / asp;
}
top = selectRectNote.y + selectRectNote.height;
}
} else if (isLeftBottomMouseDown) {
//参考原点为：rightTop
if (leftCvsXYCurrent.y < selectRectNote.y && leftCvsXYCurrent.x > selectRectNote.x + selectRectNote.width) {
//位于第一象限
if (w >= leftCvsWidth -( selectRectNote.x + selectRectNote.width)) {
w = leftCvsWidth -( selectRectNote.x + selectRectNote.width);
h = w / asp;
}
rst.x = selectRectNote.x + selectRectNote.width;
top = selectRectNote.y - h;
} else if (leftCvsXYCurrent.y >= selectRectNote.y && leftCvsXYCurrent.x > selectRectNote.x + selectRectNote.width) {
//位于第四象限
rst.x = selectRectNote.x + selectRectNote.width;
top = selectRectNote.y;
if (w >= leftCvsWidth -( selectRectNote.x + selectRectNote.width)) {
w = leftCvsWidth -( selectRectNote.x + selectRectNote.width);
h = w / asp;
}
} else if (leftCvsXYCurrent.y < selectRectNote.y && leftCvsXYCurrent.x < selectRectNote.x + selectRectNote.width) {
//位于第二象限

rst.x = selectRectNote.x + selectRectNote.width - w;
if (rst.x <= 0) {
rst.x = 0;
w = selectRectNote.x + selectRectNote.width;
h = w / asp;
}
top = selectRectNote.y - h;
} else if (leftCvsXYCurrent.y > selectRectNote.y && leftCvsXYCurrent.x < selectRectNote.x + selectRectNote.width) {
//位于第三象限
top = selectRectNote.y;
rst.x = selectRectNote.x + selectRectNote.width - w;
if (rst.x <= 0) {
rst.x = 0;
w = selectRectNote.x + selectRectNote.width;
h = w / asp;
}
}
} else if (isRightBottomMouseDown) {
//参考原点为：leftTop
if (leftCvsXYCurrent.y < selectRectNote.y && leftCvsXYCurrent.x > selectRectNote.x) {
//位于第一象限
rst.x = selectRectNote.x;
top = selectRectNote.y - h;
if (w >= leftCvsWidth - selectRectNote.x) {
w = leftCvsWidth - selectRectNote.x;
h = w /asp;
}
} else if (leftCvsXYCurrent.y > selectRectNote.y && leftCvsXYCurrent.x > selectRectNote.x) {
//位于第四象限
rst.x = selectRectNote.x;
top = selectRectNote.y;
if (w > leftCvsWidth - rst.x) {
w = leftCvsWidth - rst.x;
h = w / asp;
}
} else if (leftCvsXYCurrent.y < selectRectNote.y && leftCvsXYCurrent.x < selectRectNote.x) {
//位于第二象限
rst.x = selectRectNote.x - w;
if (rst.x <= 0) {
rst.x = 0;
w = selectRectNote.x;
h = w / asp;
}
top = selectRectNote.y - h;
} else if (leftCvsXYCurrent.y > selectRectNote.y && leftCvsXYCurrent.x < selectRectNote.x) {
//位于第三象限
top = selectRectNote.y;
rst.x = selectRectNote.x - w;
if (rst.x <= 0) {
rst.x = 0;
w = selectRectNote.x;
h = w / asp;
}
}
}

rst.y = top;
rst.w = w;
rst.h = h;
}

rst.w = rst.w > leftCvsWidth ? leftCvsWidth : rst.w;
rst.h = rst.h > leftCvsHeight ? leftCvsHeight : rst.h;
return {'x' : rst.x, 'y' : rst.y, 'width' : rst.w, 'height' : rst.h};
}

//编辑框的事件绑定
var bindEvent = this.bindEvent = function() {
leftTop.onmousedown = function(e) {
isLeftTopMouseDown = true;
}
leftTop.onmouseup = function(e) {
isLeftTopMouseDown = false;
}
topMiddle.onmousedown = function(e) {
isTopMiddleMouseDown = true;
}

topMiddle.onmouseup = function(e) {
isTopMiddleMouseDown = false;
}

rightTop.onmousedown = function(e) {
isRightTopMouseDown = true;
}

rightTop.onmouseup = function(e) {
isRightTopMouseDown = false;
}
leftMiddle.onmousedown = function(e) {
isLeftMiddleMouseDown = true;
}
leftMiddle.onmousemove = function(e) {

}
leftMiddle.onmouseup = function(e) {
isLeftMiddleMouseDown = false;
}
rightMiddle.onmousedown = function(e) {
isRightMiddleMouseDown = true;
}

rightMiddle.onmouseup = function(e) {
isRightMiddleMouseDown = false;
}
leftBottom.onmousedown = function(e) {
isLeftBottomMouseDown = true;
}

leftBottom.onmouseup = function(e) {
isLeftBottomMouseDown = false;
}
bottomMiddle.onmousedown = function(e) {
isBottomMiddleMouseDown = true;
}

rightBottom.onmousedown = function(e) {
isRightBottomMouseDown = true;
}

rightBottom.onmouseup = function(e) {
isRightBottomMouseDown = false;
}

leftCvs.onmousedown = function(e){
isLeftCvsMouseDown = true;
mousedown(e);
}

leftCvs.onmousemove = function(e){
mousemove(e);
mouseMoveSelector(e);
}

selector.onmousedown = function(e) {
isSelectorMouseDown = true;
e = e ? e : win.event;
var xy = clientXYInElement(e,selectAreaId);
var x = xy.x, y = xy.y;
mouseOnSelectXY.x = x;
mouseOnSelectXY.y = y;
xy = clientXYInElement(e,leftCanvasId);
leftCvsXY.x = xy.x;
leftCvsXY.y = xy.y;

}

selector.onmousemove = function(e){
$(this).css({
'cursor':'move'
})
mousemove(e);
mouseMoveSelector(e);
}

selector.onmouseup = function(e){
mouseUp(e);
isLeftCvsMouseDown = false;
isSelectorMouseDown = false;
selectorMovePointMouseDownToFalse();
}

leftCvs.onmouseup = function(e){
mouseUp(e);
isSelectorMouseDown = false;
selectorMovePointMouseDownToFalse();
}

//ie低版本需要设置宽高
leftCvsWidth = $(leftCvs).parent().width();
leftCvsHeight = $(leftCvs).parent().height();
rightCvsWidth = $(rightCvs).parent().width();
rightCvsHeight = $(rightCvs).parent().height();

setCanvasHeight();
initeSelector();
createPdt();
}

//初始化selector
function initeSelector() {
if (isDefaultSelector && selectRectNote.width <= 0 && selectRectNote.height <= 0) {
var h = leftCvsHeight
var w = h * asp;
var x, y;
if (asp) {
if (w > leftCvsWidth) {
w = leftCvsWidth;
h = w / asp;
x = 0;
var temp = leftCvsHeight - h;
y = temp / 2;
} else {
y = 0;
var temp = leftCvsWidth - w;
x = temp / 2;
}
} else {
w = leftCvsWidth / 2;
h = h / 2;
x = (leftCvsWidth - w) / 2;
y = (leftCvsHeight - h) / 2;
}
selectRectNote.x = x, selectRectNote.y = y, selectRectNote.width = w, selectRectNote.height = h;
selectRect.left = x, selectRect.top = y, selectRect.width = w, selectRect.height = h;
}

if (selectRectNote.width > 0 && selectRectNote.height > 0) {
selector.style.left = selectRectNote.x + "px";
selector.style.top = selectRectNote.y + "px";
$(selector).width(selectRectNote.width);
$(selector).height(selectRectNote.height);
$(selector).css({
'display' : 'block'
});
setPointsToSetSelectorSize();
} else {
selector.style.left = 0;
selector.style.top = 0;
$(selector).width(0);
$(selector).height(0);
$(selector).css({
'display' : 'none'
});
$(selector).find("div").css({
'top' : 0,
'left' : 0,
'display' : 'none'
});
}
}

leftImg.onload = function() {
setCanvasHeight();
}

if (imgSrc) {
setImgUrl(src);
}
};