基于JavaScript实现图片剪切效果,利用Javascript裁剪
分类:计算机网络

本文实例呈报了js实现点击后将文字或图表复制到剪贴板的秘籍,代码特别简短实用,具体效果代码如下所示:

前日又发疯学习了web前端的图片剪裁效果,能够有个区域来框住图片的某一有的,并可以预览框住的一部分 

前言

学会怎么获得鼠标的坐标地方以及监听鼠标的按下、拖动、松手等动作事件,进而完毕拖动鼠标来改动图片大小。

兑现复制文字代码:

职能图如下:

就自己来说,页面上的设计比较灵活的局地,其实不是许多,诸如滑动验证码,图片裁剪等比较好的并行设计。

还足以学学css中的clip属性。

<table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> 
  <tr> 
  <th width="100%" style="color: white;"><s:text name="询单明细"></s:text></th> 
  </tr> 
 <tr> 
  <td align="center">  
   <textarea name="inquiryContact1" id="inquiryContact1" rows="15" cols="60" readonly="readonly"></textarea> 
    <div id="inquiryInfoDIV" style="display:none"> 
      <s:property value="inquiryContact" escape="false"/> 
    </div> 
    <script>     dojo.byId("inquiryContact1").innerText=dojo.byId("inquiryInfoDIV").innerText; 
   </script> 
  </td> </tr> 
 <tr> 
  <td align="center"> 
   <input type="button" id="button" name="button" value="复制" onclick="copyContact()"/> 
  </td> </tr> </table> 


<script type="text/javascript"> 
  var i = 0 ;  
  function copyContact(){ 
    var contat = document.getElementById("inquiryContact1").value; 
    window.clipboardData.setData('text', contat); 
    if(window.clipboardData.getData('text')==''){ 
      if(i==1){ 
        alert("复制失败,请手动Ctrl+C快捷键复制!"); 
      }else{ 
        alert("复制失败,请重新复制!"); 
        i = 1; 
      } 
    }else{ 
       alert("内容已经复制到剪贴板!"); 
    } 
  } 
</script>

图片 1

从刚初叶工作的时候,小编就想把那些事物明白下,无助向来没这几个需求,乘着后天的悠闲,研讨了一上午,时期碰到了尺寸的主题素材,一贯非常受折磨,那实际也反映二个题目,笔者的

一、CSS达成图片不透明及裁剪效果。

达成复制图片代码:

望着是还是不是很炫呢

抑或比很软绵绵弱。

图片剪切三层构造

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<SCRIPT LANGUAGE="JScript"> 
var oPopup = window.createPopup(); 
function ButtonClick(div) 
{ 
//var div = document.getElementById('divId'); 
div.contentEditable = 'true'; 
var controlRange; 
if (document.body.createControlRange) { 
controlRange = document.body.createControlRange(); 
controlRange.addElement(div); 
controlRange.execCommand('Copy'); 
} 
div.contentEditable = 'false'; 
} 
</SCRIPT> 
</head> 
<body> 
  <div id="divId1"> 
    <img src="F:/2012070518474964.jpg" onclick="ButtonClick(this)"> 
  </div> 
</BODY> 
</body> 
</html>

粗略介绍下促成格局呢

完毕效果与利益:

1、第一层opacity,给图层设置发光度

感兴趣的读者能够测量检验自个儿测量检验一下代码,恐怕对其效果举行修改和宏观!

1.布局就是反正两块div,侧面的好说,主借使右手的,侧面的用相对布局的主意分了3层,最上边一层是贰个半晶莹剔透的图纸,中间一层是原图,但被分割成唯有一块,也只体现这一块,能够用clip:rect方法完结,然后最上边一层就是团结写的二个边框,在边框上加了8个点,分别给那8个点定义地方。 

客商点击上传图片后,页面呈现所上传的图片,况且出现裁剪框和三个预览区域,最后点击裁剪开关保存裁剪的图纸到服务器上。 

2、第二层clip,clip属性:对图片进行裁剪,完毕图像的一片段显得,别的一些开展隐藏

您或然感兴趣的小说:

  • php+js落成图片的上传、裁剪、预览、提交示例
  • js+jquery达成图片裁剪功用
  • jquery imgareaselect 使用应用js与程序结合贯彻图片剪切
  • 行使JavaScript+canvas实现图片裁剪
  • 听说原生JS达成图片裁剪
  • javascript 图片裁剪本事解读
  • JS完毕图片剪裁并预览效果
  • 基于JavaScript达成图片剪切效果
  • 选取Javascript裁剪图片并储存的简短完毕

2.然后JS代码用了鼠标的点击事件来完结。 

效果与利益非常粗大略,整个进程自身遇上的五个难题,第一个是裁剪的JS效果,第贰个则是图片数据的拍卖。 

3、第三层选拔框absolute(与第二层重叠的),富含八个触点的功能

上面贴上团结的代码:

对此第一个难题,我引用了英特网的四个插件,就本身备感来讲,裁剪过程客户的满意度只可以算一般,因为它只可以裁剪长方形区域,就算边框上有八个拉动设置,可是带来框时仍然按长方形缩放,就那一点不太让本人乐意。

图片 2

index.html (这里要援引七个js文件,分别是jquery和jquery-ui,个中jquery能够引用网络的,jquery-ui小编是投机下在该地援引的,大家能够友善去官方网站下载,不引用则不可能落到实处拖动剪切框) 

福寿无疆格局如下: 

html代码:

<!DOCTYPE HTML>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片剪切</title>
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.12.0/jquery-ui.min.js"></script>
<link href="img.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="img.js"></script>
</head>
<body>
 <div id="box">
 <img src="images/1.jpg" id="img1">
 <img src="images/1.jpg" id="img2">
 <div id="main">
 <div id="left-up" class="minDiv left-up"></div>
 <div id="up" class="minDiv up"></div>
 <div id="right-up" class="minDiv right-up"></div>
 <div id="right" class="minDiv right"></div>
 <div id="right-down" class="minDiv right-down"></div>
 <div id="down" class="minDiv down"></div>
 <div id="left-down" class="minDiv left-down"></div>
 <div id="left" class="minDiv left"></div>
 </div>
 </div>
 <div id="preview">
 <img src="images/1.jpg" id="img3">
 </div>

</body>
</html>
 img.css


body {
 background-color: #333;
}

#box {
 position: absolute;
 top: 200px;
 left: 100px;
 width: 600px;
 height: 319px;
}

#img1 {
 /*不透明度*/
 opacity: 0.3;
 position:absolute;
 top: 0;
 left: 0;

}

#img2 {
 position: absolute;
 top: 0;
 left: 0;

 /*用于剪切图像的函数
 clip: rect(top,right,bottom,left);
 top表示剪切区域顶部离图片顶部的距离
 right表示剪切区域右边离图片左边的距离,即长+left
 bottom表示剪切区域底部离图片顶部的距离,即宽+top
 left表示剪切区域左边离图片左边的距离
 */
 clip: rect(0, 200px, 200px, 0);
}

#main {
 position: absolute;
 border: 1px solid #fff;
 width:200px;
 height: 200px;
}

#preview {
 position: absolute;
 width: 600px;
 height: 319px;
 top:200px;
 left: 720px;
}
#preview img{
 /*要让函数setPreview里的clip函数达到作用,要给img增加绝对定位或者相对定位
 但由于父元素是绝对定位,所以这里是绝对定位*/
 position: absolute;
}

.minDiv {
 position: absolute;
 width: 8px;
 height: 8px;
 background-color: #fff;
}

.left-up {
 top:-4px;
 left: -4px;

 /*鼠标变化 n-北 w-西 s-南 e-东*/
 cursor: nw-resize;
}

.up {
 /*距最近的一个position属性为absolute或者relative的父级元素左边50%的距离
 除此之外 top right bottom也是距最近的一个position属性为absolute或者relative的父级元素
 的距离
 */
 left: 50%;
 /*距离左边-4px即向左边移动4px*/
 margin-left: -4px;
 top:-4px;
 cursor: n-resize;
}

.right-up {
 right: -4px;
 top: -4px;
 cursor: ne-resize;
}

.right {
 top: 50%;
 margin-top:-4px;
 right: -4px;
 cursor: e-resize;
}

.right-down {
 bottom: -4px;
 right: -4px;
 cursor: se-resize;
}

.down {
 left: 50%;
 margin-left: -4px;
 bottom: -4px;
 cursor: s-resize;
}

.left-down {
 left: -4px;
 bottom: -4px;
 cursor: sw-resize;
}

.left {
 bottom: 50%;
 margin-bottom: -4px;
 left: -4px;
 cursor: w-resize;
}
 img.js


// 在元素加载完之后执行,确保元素可以成功获取
window.onload =function(){

 document.onselectstart = new Function('event.returnValue=false;');
 $("#main").draggable({containment:'parent', drag:setChoice});
 var img = document.getElementById("img2");

 var rightDiv = document.getElementById("right");
 var upDiv = document.getElementById("up");
 var leftDiv = document.getElementById("left");
 var downDiv = document.getElementById("down");
 var leftupDiv = document.getElementById("left-up");
 var rightupDiv = document.getElementById("right-up");
 var rightdownDiv = document.getElementById("right-down");
 var leftdownDiv = document.getElementById("left-down");

 var mainDiv = document.getElementById("main");
 var ifKeyDown = false; 

 var contact = "";// 表示被按下的触点

 //鼠标按下状态
 rightDiv.onmousedown = function(e) {
 /*拖动效果引入的jquery 和 jquery-ui也会去触发鼠标点击事件,
 所以为了防止自己定义的点击事件和引入的点击事件冲突,传入e并加入以下
 这条语句,防止冒泡。冒泡是指鼠标点击里面的元素时也会触发父元素的一些事件*/
 e.stopPropagation();
 ifKeyDown = true;
 contact = "right";
 }
 upDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "up";
 }
 leftDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "left";
 }
 downDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "down";
 }
 leftupDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "left-up";
 }
 rightupDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "right-up";
 }
 rightdownDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "right-down";
 }
 leftdownDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "left-down";
 }

 //鼠标松开状态
 window.onmouseup = function() {
 ifKeyDown = false;
 }

 //鼠标移动事件
 window.onmousemove = function(e) {
 if(ifKeyDown == true){

 switch(contact){
 case "right": rightMove(e); break;
 case "up": upMove(e); break;
 case "left": leftMove(e); break;
 case "down": downMove(e); break;
 case "left-up": leftMove(e); upMove(e); break;
 case "right-up": rightMove(e); upMove(e); break;
 case "right-down": rightMove(e); downMove(e); break;
 case "left-down": leftMove(e); downMove(e); break;
 }

 }
 setChoice();
 setPreview();

 }
 //右边移动
 function rightMove(e) {
 var x = e.clientX; //鼠标x坐标
 var addWidth = ""; //鼠标移动后选取框增加的宽度
 var widthBefore = mainDiv.offsetWidth - 2; //选取框变化前的宽度,减2是为了减去边框border的宽,左右两边各为1px,所以是2
 addWidth = x - getPosition(mainDiv).left //鼠标移动后增加的宽度
 if(widthBefore <= img.width){
 mainDiv.style.width = addWidth + "px"; //选取框变化后的宽度
 } else {
 mainDiv.style.width = img.width + "px";
 }
 }

 //上边移动
 function upMove(e) {
 var topBefore = mainDiv.offsetTop;
 var y = e.clientY;//鼠标纵坐标
 var addHeight = 0;
 var mainY = getPosition(mainDiv).top;//选取框相对于屏幕上边的距离
 addHeight = y - mainY; //增加的高度
 var heightBefore = mainDiv.offsetHeight - 2;
 var bottom = topBefore + heightBefore;

 var heightAfter = heightBefore - addHeight;
 var topAfter = mainDiv.offsetTop + addHeight;

 if(topAfter < bottom && topAfter > -2){
 mainDiv.style.height = heightAfter + "px";
 mainDiv.style.top = topAfter + "px";
 }

 }

 //左边移动
 function leftMove(e) {
 // 左边框变化前距离父元素左边的距离
 var leftBefore = mainDiv.offsetLeft;
 // 鼠标按下停止后鼠标距离浏览器左边界的距离
 var x = e.clientX;
 // 定义增加的宽度
 var addWidth = 0;
 // 变化之前剪辑框的宽度
 var widthBefore = mainDiv.offsetWidth - 2;
 // 变化之前左边框距离浏览器左边界的距离
 var mainDivLeft = getPosition(mainDiv).left;
 // 右边框距离父元素的左边的距离
 var right = leftBefore + widthBefore;
 // 增加的宽度
 addWidth = x - mainDivLeft;
 // 变化之后剪辑框的宽度
 var widthAfter = widthBefore - addWidth;
 // 变化之后剪辑框离左边的距离
 var leftAfter = mainDiv.offsetLeft + addWidth;
 // 防止左边框移到右边框以外区域
 if(leftAfter < right && leftAfter > -2) {
 // 定义变化后的宽度
 mainDiv.style.width = widthAfter + "px";
 // 定义变化后距离左边父元素的距离
 mainDiv.style.left = leftAfter + "px";
 }

 }

 //下边移动
 function downMove(e) {
 var y = e.clientY;
 var addHeight = 0;
 var heightBefore = mainDiv.offsetHeight - 2;
 addHeight = y - getPosition(mainDiv).top;
 if(heightBefore <= img.height) {
 mainDiv.style.height = addHeight + "px";
 } else {
 mainDiv.style.height = img.height + "px";
 }

 }


 // 获取元素相对于屏幕左边的距离,利用offsetLeft
 // node为传入的元素
 function getPosition(node) {
 /*获取元素相对于父元素的左边距*/
 var left = node.offsetLeft;
 /*获取元素相对于父元素的上边距*/
 var top = node.offsetTop;
 /*获取元素的父元素*/
 var parent = node.offsetParent;
 /*判断是否存在父元素,存在则一直加上左边距,一直算出元素相对于浏览器
 左边界的距离*/
 while(parent != null) {
 /*循环累加子元素相对于父元素的左边距*/
 left += parent.offsetLeft;
 /*循环累加子元素相对于父元素的上边距*/
 top += parent.offsetTop;
 /*循环获取父元素的父元素,直至没有父元素为止*/
 parent = parent.offsetParent;
 }
 return {"left":left,"top":top};
 }


 //设置选取区域高亮可见
 function setChoice() {
 var top = mainDiv.offsetTop;
 var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
 var left = mainDiv.offsetLeft;
 img.style.clip = "rect("+ top+"px,"+ right+"px,"+ bottom +"px,"+ left+"px"+")"
 }

 //预览函数
 function setPreview() {
 var top = mainDiv.offsetTop;
 var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
 var left = mainDiv.offsetLeft;
 var img3 = document.getElementById("img3");
 img3.style.clip = "rect("+ top+"px,"+ right+"px,"+ bottom +"px,"+ left+"px"+")"

 img3.style.top = -(top) + "px";
 img3.style.left = -(left) + "px";
 }
}

以下是简简单单的页面设计:

<div id="box">
 <img src="img/1.jpg" id="img1" />
 <img src="img/1.jpg" id="img2" />
 <div id="main">
  <div class="Divmin up-left"></div>
  <div class="Divmin up"></div>
  <div class="Divmin up-right"></div>
  <div class="Divmin right"></div>
  <div class="Divmin right-down"></div>
  <div class="Divmin down"></div>
  <div class="Divmin left-down"></div>
  <div class="Divmin left"></div>
 </div>
</div>

上述正是本文的全体内容,希望对咱们的学习抱有帮助,也盼望我们多多援救脚本之家。

<div style="float:left;"><img id="target"></div>
<div style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" ></div>
<div style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" ></div>
<form action="{:U('/test/crop_deal')}" method="post" onsubmit="return checkCoords()" enctype="multipart/form-data" id="form">
<input type="file" name="file" onchange="change_image(this)">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="裁剪"/>
</form>

css代码:

您可能感兴趣的篇章:

  • js完成点击后将文字或图表复制到剪贴板的艺术
  • php+js完毕图片的上传、裁剪、预览、提交示例
  • js+jquery完成图片裁剪成效
  • jquery imgareaselect 使用使用js与程序结合贯彻图片剪切
  • 选用JavaScript+canvas达成图片裁剪
  • 依赖原生JS完结图片裁剪
  • javascript 图片裁剪技艺解读
  • 基于JavaScript完结图片剪切效果
  • 选择Javascript裁剪图片并储存的简单达成

下面是JS代码:

body{
  background: #333;
 }
 #box{
  width: 500px;
  height: 380px;
  position: absolute;
  top: 100px;
  left: 200px;
 }
 #img1,#img2{
  position: absolute;
  top: 0;
  left: 0;
 }
 #img1{
  opacity: 0.3;
 }
 #img2{
  clip: rect(0,200px,200px,0);
 }
 #main{
  position: absolute;/*第三层需用绝对定位浮在上面*/
  width: 200px;
  height: 200px;
  border: 1px solid #fff;
 }
 .Divmin{
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
 }
 .up-left{margin-top: -4px;margin-left: -4px;cursor: nw-resize;}
 .up{
  left: 50%;/*父元素盒子main宽度的一半,注意要有绝对定位*/
  margin-left:-4px;
  top: -4px;
  cursor: n-resize;
 }
 .up-right{top: -4px;right: -4px;cursor: ne-resize;}
 .right{top: 50%;margin-top: -4px;right: -4px;cursor: e-resize;}
 .right-down{right: -4px;bottom: -4px;cursor: se-resize;}
 .down{bottom: -4px;left: 50%;margin-left: -4px;cursor: s-resize;}
 .left-down{left: -4px;bottom: -4px;cursor: sw-resize;}
 .left{left: -4px;top: 50%;margin-top: -4px;cursor: w-resize;}
function change_image(file){
var reader = new FileReader();
reader.onload = function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
// $('#target').css({"height":"600px","width":"600px"});
// 限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);

var jcrop_api, boundx, boundy;

setTimeout(function(){


$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});

function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览Div的大小
var ry = 48 / c.h;

$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览Div的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};


function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

},500);

}

二、javascript获取采纳框偏移量

此处稍作两点提醒:

慎选框鼠标拖动地方详解:

这些:不要忘记在页面底部引进插件:

offsetLeft:元素相对于其父成分左边界的相距;

  <script src="/plug/js/jquery.min.js" type="text/javascript"></script>
  <script src="/plug/js/jquery.Jcrop.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="/plug/css/Jcrop.css" rel="external nofollow" type="text/css" />

clientX:鼠标地方的横坐标;

那多个:某人心灵的话也许看到了JS里有个定期,同期心境是或不是很狐疑那不是稍微多如牛毛吗?其实不是,上传图片到JS加载到页面上,是索要时刻的,那一个按期的含义在于

clientWidth:成分的增幅;

等到图片被JS加载到页面上时才去加载裁剪效果,这里也是一再尝试后得出的做法。 

offsetXY:是该事件产生的盒子模型里的坐标,与滚动条毫不相关。

后端PHP管理自个儿用的是THINKPHP框架,版本是3.1.3

clientXY:是全体浏览器可用部分里的坐标,与滚动条非亲非故,即必要拖动滚动条工夫来看的区域不思考。

贴上代码:

pageXY:是整套网页里的坐标,与滚动条有关。

function crop_deal(){
  ob_clean();
  import ( 'ORG.Net.UploadFile' );
  $upload = new UploadFile ();
  $upload->maxSize = 2000000;
  $upload->allowExts = array (
    'jpg',
    'gif',
    'png',
    'jpeg'
  );
  $upload->savePath = './upload/test/';
  $upload->autoSub = true;
  $upload->subType = 'date';
  $upload->dateFormat = 'Ymd';
  if ($upload->upload () ) {
    $info = $upload->getUploadFileInfo();
    $new_path = "./upload/test/thumb".date('Ymd');
    $file_store = $new_path."/".date('YmdHis').".jpg";
    if(!file_exists($new_path)){
      mkdir($new_path,0777,true);
    }
    $source_path = "http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];
    $img_size = getimagesize($source_path);
    $width = $img_size[0];
    $height = $img_size[1];  
    $mime = $img_size['mime'];
    $srcImg = imagecreatefromstring(file_get_contents($source_path));
    $cropped_img = imagecreatetruecolor($_POST['w'], $_POST['h']);
    //缩放
    // imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);
    //裁剪
    imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);
    header("Content-Type:image/jpeg");
    imagejpeg($cropped_img,$file_store);
    imagedestroy($srcImg);
    imagedestroy($cropped_img);
  }

}

图片 3

此间正是调用GD库里创制图像的一多元措施,最根本就是imagecopy(),它是将原图按规定的剪裁地点,裁剪大小复制到新的图片上去,那也验证了一件事,页面客商在裁剪图片

布局贰个getPosition()函数,用于获取成分相对于显示器左侧及上方的偏离

的时候实在前端并不曾对图纸操作,而是获得裁剪时的坐标地点,裁剪大小,然后提交到PHP操作!!

js代码如下:

总结

//获取元素相对于屏幕左边及上边的距离,利用offsetLeft
 function getPosition(el){
  var left = el.offsetLeft;
  var top = el.offsetTop;
  var parent = el.offsetParent;
  while(parent != null){
   left += parent.offsetLeft;
   top += parent.offsetTop;
   parent = parent.offsetParent;
  }
  return {"left":left,"top":top};
 }

上述正是那篇小说的全体内容了,希望本文的内容对大家的读书可能利用斯维夫特能带来一定的扶植,如若有疑难大家能够留言交换,多谢大家对剧本之家的补助。

三、javascript达成调控触点

您大概感兴趣的稿子:

  • js落成点击后将文字或图片复制到剪贴板的不二诀要
  • php+js达成图片的上传、裁剪、预览、提交示例
  • js+jquery达成图片裁剪效用
  • jquery imgareaselect 使用应用js与程序结合贯彻图片剪切
  • 采用JavaScript+canvas完结图片裁剪
  • 基于原生JS完毕图片裁剪
  • javascript 图片裁剪能力解读
  • JS实现图片剪裁并预览效果
  • 基于JavaScript落成图片剪切效果

监听鼠标的按下、拖动、松手的平地风波调节选用框的高低。

瞩目区分:

Element.clientWidth 属性表示成分的中间宽度,以像素计。该属性包蕴内边距,但不满含垂直滚动条(若是局部话)、边框和外边距。

即clientWidth不满含边框,offsetWidth包罗边框

1)点击侧边的触点

js代码:

var mainDiv = $('main');
 var rightDiv = $('right');
 var isDraging = false;
 var contact = "";//表示被按下的触点
 //鼠标按下时
 rightDiv.onmousedown = function(){
  isDraging = true;
  contact = "right";
 }
 //鼠标松开时
 window.onmouseup = function(){
  isDraging = false;
 }
 //鼠标移动时
 window.onmousemove = function(e){
  if(isDraging == true){
   if(contact == "right"){
    var e = e||window.event;
    var x = e.clientX;//鼠标位置的横坐标
    var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度
    //var widthBefore = mainDiv.clientWidth;
    var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后选取框增加的宽度
    mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
   }
  }
 }
//获取id的函数
function $(id){
 return document.getElementById(id);
}

2)点击上面触点

点击下面中间的触点移动时,接纳框的万丈和左上角的地点都急需扭转。

扩充的惊人=选拔框相对于荧屏方面包车型地铁距离 - 鼠标地方的纵坐标

选取框左上角的top值要减去充实的莫斯中国科学技术大学学,因为鼠标向上移动时中度增添,top值减小,下移时低度减小,top增大。

变动暗示图:

图片 4

js代码:

else if(contact == "up"){
    var y = e.clientY;//鼠标位置的纵坐标
    var heightBefore = mainDiv.offsetHeight - 2;//选取框变化前的高度
    var addHeight = getPosition(mainDiv).top - y;//增加的高度
    mainDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度
    mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标,鼠标向上移纵坐标减小,下移增大
   }

 3)点击左侧触点

原理同点击上边触点,宽度和右臂的岗位都会转移

变化暗中提示图:

图片 5

js代码:

 else if(contact == "left"){
     var widthBefore = mainDiv.offsetWidth - 2;
      var addWidth = getPosition(mainDiv).left - e.clientX;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
      mainDiv.style.width = widthBefore + addWidth + 'px';
     mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左边的距离(相当于左边位置横坐标)等于选取框距父级元素的距离减去增加的宽度
   }

 4)点击上面触点

扩充的小幅度 = 鼠标地点纵坐标 - 距显示屏上方的距离 - 原先的上涨的幅度

左上角的职位不需更动

js代码:

else if(contact = "down"){
     var heightBefore = mainDiv.offsetHeight - 2;
     var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
     mainDiv.style.height = heightBefore + addHeight + 'px';
    }

 5)点几个角时的变动是中度和宽度变化的附加,所以最棒将上边多个转变的历程封装成函数,便于维护和代码复用。

      要是用if else 必要看清8次,所以改为switch语句来简化代码

      修改后的js代码如下:

window.onmousemove = function(e){
  var e = e||window.event;
  if(isDraging == true){
   switch (contact){
    case "up" : upMove(e);break;
    case "right" : rightMove(e);break;
    case "down" : downMove(e);break;
    case "left" : leftMove(e);break;
    case "up-right" : upMove(e);rightMove(e);break;
    case "down-right" : downMove(e);rightMove(e);break;
    case "down-left" : downMove(e);leftMove(e);break;
    case "up-left" : upMove(e);leftMove(e);break;
   }
  }
 }
//获取id的函数
function $(id){
 return document.getElementById(id);
}
//获取元素相对于屏幕左边及上边的距离,利用offsetLeft
 function getPosition(el){
  var left = el.offsetLeft;
  var top = el.offsetTop;
  var parent = el.offsetParent;
  while(parent != null){
   left += parent.offsetLeft;
   top += parent.offsetTop;
   parent = parent.offsetParent;
  }
  return {"left":left,"top":top};
 }
 //up移动
 function upMove(e){
  var y = e.clientY;//鼠标位置的纵坐标
  var heightBefore = mainDiv.offsetHeight - 2;//选取框变化前的高度
  var addHeight = getPosition(mainDiv).top - y;//增加的高度
  mainDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度
  mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标,鼠标向上移纵坐标减小,下移增大
 }
 //right移动
 function rightMove(e){
  var x = e.clientX;//鼠标位置的横坐标
  var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度
  //var widthBefore = mainDiv.clientWidth;
  var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后选取框增加的宽度
  mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
 }
 //down移动
 function downMove(e){
  var heightBefore = mainDiv.offsetHeight - 2;
  var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
  mainDiv.style.height = heightBefore + addHeight + 'px';
 }
 //left移动
 function leftMove(e){
  var widthBefore = mainDiv.offsetWidth - 2;
  var addWidth = getPosition(mainDiv).left - e.clientX;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
  mainDiv.style.width = widthBefore + addWidth + 'px';
  mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左边的距离(相当于左边位置横坐标)等于选取框距父级元素的距离减去增加的宽度
 }

四、达成选择框区域明亮展现

1)选拔框内的第二层图片需另行安装其clip属性

八个方面图示:

图片 6

js代码:

//设置选取框图片区域明亮显示
 function setChoice(){
  var top = mainDiv.offsetTop;
  var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
  var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
  var left = mainDiv.offsetLeft;
  img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
 }

2)鼠标移动时会导致图片被选中,可在js代码中添加一行代码使其取缔图片被入选

//禁止图片被选中
 document.onselectstart = new Function('event.returnValue = false;');

也得以在css样式里增多 *{user-select:none}

野趣是文本不可选中,对图纸跟div有同等的法力。

五、达成选取框地方可拖动

第一要阻拦事件冒泡

js代码如下: 

//鼠标按下触点时
 rightDiv.onmousedown = function(e){
  e.stopPropagation();
  isDraging = true;
  contact = "right";
 }

鼠标拖拽效果的贯彻可知另一篇小说

六、落成图片剪切区域预览

新增添三个图形预览区域的div

html代码:

<div id="preview">
 <img src="img/1.jpg" id="img3" />
</div>

css代码:

#preview{
  position: absolute;
  width: 500px;
  height: 380px;
  top: 100px;
  left:710px ;
 }
 #preview #img3{position: absolute;}

瞩目:要让clip:rect(top,right,bottom,left) 起效果,必得让效果成分为绝对/绝对定位。

js部分雷同是选拔clip属性,和setChoice()函数同时被调用

再正是为了让侧面预览区的左上角地点固定,需求安装其top和left的值

//右边图片预览函数
 function setPreview(){
  var top = mainDiv.offsetTop;
  var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
  var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
  var left = mainDiv.offsetLeft;
  var img3 = $('img3');
  img3.style.top = -top + 'px';
  img3.style.left = -left + 'px';
  img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
 }

如上所述是笔者给大家介绍的基于JavaScript达成图片剪切效果,希望对大家享有辅助,假设我们有另外疑问请给小编留言,作者会及时回复大家的。在此也极其多谢大家对台本之家网站的支撑!

你可能感兴趣的稿子:

  • js落成点击后将文字或图表复制到剪贴板的法子
  • php+js完毕图片的上传、裁剪、预览、提交示例
  • js+jquery完结图片裁剪功用
  • jquery imgareaselect 使用使用js与程序结合贯彻图片剪切
  • 动用JavaScript+canvas完毕图片裁剪
  • 依照原生JS达成图片裁剪
  • javascript 图片裁剪手艺解读
  • JS完毕图片剪裁并预览效果
  • 动用Javascript裁剪图片并蕴藏的粗略完毕

本文由美高梅网址发布于计算机网络,转载请注明出处:基于JavaScript实现图片剪切效果,利用Javascript裁剪

上一篇:网络编程,NodeJS学习笔记之网络编程 下一篇:javascript中定义事件的三种方式,javascript相关事件
猜你喜欢
热门排行
精彩图文