看到网上的图片裁切,很是有感觉,我自己基于jquery-ui,然后根据大家普遍接受的clip原理,实现的简单的预览
想整张图片,不知道怎么整上。
- // JavaScript Document
- var x;
- var y;
- var prex;
- var prey;
- $(document).ready(function(){
- $("#layhandle").draggable({cursor:"move",containment:"#laycropper"});
- $("#layhandle").resizable({ handles: 'n, e, s, w' });//调整为四个方向改变
- document.οnmοusemοve=getpos;
- });
- //获取有用坐标
- function getpos(){
- /*var x=$("#layhandle")[0].offsetWidth-$("#layhandle")[0].clientLeft;//包括边框
- var y=$("#layhandle")[0].offsetHeight-$("#layhandle")[0].clientTop;*/
- x=$("#layhandle")[0].clientWidth;//获取可见部分宽度,去掉border
- y=$("#layhandle")[0].clientHeight;//获取可见部分高度,去掉border
- var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽
- var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高
- //alert($("#layhandle")[0].parentNode.clientWidth);
- /*
- rect(top,right,bottom,left)
- **/
- var rtop=parenty;
- var rright=parentx+x;
- var rbottom=parenty+y;
- var rleft=parentx;
- var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";
- $("#laycropper img").css("clip",rectt);//利用clip功能实现切割
- createview();
- }
- //生成一个按比例放大后的部分图像,显示在一个预览框里
- function createview(){
- var bili=2;
- prex=$("#layhandle")[0].clientWidth;//获取可见部分宽度,去掉border
- prey=$("#layhandle")[0].clientHeight;//获取可见部分高度,去掉border
- var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽
- var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高
- var rtop=parenty*bili;
- var rright=(parentx+x)*bili;
- var rbottom=(parenty+y)*bili;
- var rleft=parentx*bili;
- var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";
- $("#preview img").css("clip",rectt);
- }
代码很简单,使用的只是简单的操作,希望大家自己做拓展,这里只是简单的思路,我也再完善完善,让其更加自定义。
js拖放功能使用jquery-ui,用起来方便,但终究不是自己的,自己也从网上学习后,写了个简单的拖动脚本。
- // JavaScript Document
- var layerx;
- var layery;
- var i=0;
- $(document).ready(function(){
- $("#demo")[0].οnmοusedοwn=drag;//准备拖动
- $("#demo")[0].οnmοusemοve=dmove;//开始拖动
- document.οnmοuseup=delmouse;//停止移动
- });
- function drag(event){
- event=event||window.event;
- stopBubble(event);
- stopdefault(event);
- i=1;
- layerx=event.offsetX||event.layerX;
- layery=event.offsetY||event.layerY;
- }
- function dmove(event){
- event=event||window.event;
- stopBubble(event);
- stopdefault(event);
- if(i==1){
- $("#demo")[0].style.left=event.clientX-layerx+"px";
- $("#demo")[0].style.top=event.clientY-layery+"px";
- }
- }
- function delmouse(){
- i=0;
- }
- //防止冒泡事件
- function stopBubble(e){
- if(e&&e.stopPropagation){
- e.stopPropagation();
- }
- else{
- window.event.cancelBubble=true;
- }
- }
- //阻止浏览器默认行为
- function stopdefault(e){
- if(e&&e.preventDefault){
- e.preventDefault();
- }
- else{
- window.event.returnValue=false;//取消默认事件
- }
- }
缩放的原理也不难,在这就不发了。