拉伸时注意移动距离的计算，特别是向上及向左移动时，要注意同时改变裁剪区域的left、top值，否则它只会向下、向右增大。来具体说一下如何计算：
原理
以鼠标向左上角拉伸为例，鼠标的移动距离与上面所讲的一致，但此时注意计算出的值是一个负数，所以在计算裁剪区域的增加值时，要用原裁剪区的宽度或高度减去该值，同时，增加多少宽度，裁剪区的左偏移值就要减去多少，否则显示的效果是裁剪区域向右增大，如下图：
上图中，绿色区域是拉伸时增加宽、高后的裁剪区域，如果没进行偏移调整后的效果既是这样，黄色区域是进行偏移跳转后的裁剪区域，两个的叠加区就是原来的裁剪区了。
这是左上角拉伸，左下角拉伸即其他与之类似，可依照向上套。
而另一关键，拉伸越界在上面已经说过，就不再叙述了。
裁剪区域的移动
现在来说最后一个功能，裁剪区域的移动。当鼠标移动到裁剪区域内部时，就会触发移动事件，此时可以移动裁剪区域，代码如下：
/* 裁剪区域的移动 */ function tailorMove(ev ,oTailor , oPicture ,oShadow) { var oEvent = ev || window.event; var oTmpx = oEvent.clientX - oTailor.offsetLeft; var oTmpy = oEvent.clientY - oTailor.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || window.event; oLeft = oEvent.clientX - oTmpx; oTop = oEvent.clientY - oTmpy; if(oLeft < oPicture.offsetLeft ) { oLeft = oPicture.offsetLeft ; } else if(oLeft > (oPicture.offsetLeft + oPicture.offsetWidth - oTailor.offsetWidth)) { oLeft = oPicture.offsetLeft + oPicture.offsetWidth - oTailor.offsetWidth; } if(oTop < oPicture.offsetTop) { oTop = oPicture.offsetTop; } else if (oTop > (oPicture.offsetTop + oPicture.offsetHeight - oTailor.offsetHeight)) { oTop = oPicture.offsetTop + oPicture.offsetHeight - oTailor.offsetHeight; } oTailor.style.left = ( oLeft)+ 'px'; oTailor.style.top = (oTop) + 'px'; shadow(oPicture , oTailor , oShadow); } }
获取裁剪的位置
裁剪效果的功能基本完成，那么就要获取裁剪的位置，首先要知道需要获取那些属性。根据PHP的GD库操作，进行图片裁剪需要知道，裁剪的起点坐标以及裁剪的宽高。我用一个函数来获取这些数据，并将其封装后返回：
function getEle() { var oPicture = $('img').get(0); var oTailor = $('.img_box').get(0); oAttrs.LeftX = (parseInt(getCss(oTailor,'left')) - oPicture.offsetLeft); oAttrs.LeftY = (parseInt(getCss(oTailor,'top')) - oPicture.offsetTop); oAttrs.Twidth = (parseInt(getCss(oTailor,'width'))); oAttrs.Theight = (parseInt(getCss(oTailor,'height'))); return oAttrs; }
还有一个问题，如果网页上的图片是使用css压缩后的图片，那么在此获得的位置与裁剪大小会与你想像的有区别，可能裁剪后的图片范围会变大(原图较大)，也有可能会变小(原图较小)。
如果能够获得原图的大小，可以根据压缩图与原图的比例来进行裁剪，这样可以获得正确的裁剪图。
好了，一个简单的图片裁剪功能就完成了，可以利用ajax传递到后台进行处理了。