JS实现图片剪裁并预览效果


Posted in Javascript onAugust 12, 2016

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

效果图如下:

JS实现图片剪裁并预览效果

看着是不是很炫呢

简单介绍下实现方法吧

1.布局就是左右两块div,右边的好说,主要是左边的,左边的用绝对布局的方式分了3层,最下面一层是一个半透明的图片,中间一层是原图,但被剪切成只有一块,也只显示这一块,可以用clip:rect方法实现,然后最上面一层就是自己写的一个边框,在边框上加了8个点,分别给这8个点定义位置。 

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

下面贴上自己的代码:

index.html (这里要引用两个js文件,分别是jquery和jquery-ui,其中jquery可以引用网上的,jquery-ui我是自己下在本地引用的,大家可以自己去官网下载,不引用则不能实现拖动剪切框) 

<!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";
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 #Javascript
分享JS数组求和与求最大值的方法
Aug 11 #Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 #Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 #Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 #Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 #Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 #Javascript
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
Discuz 模板引擎的封装类代码
2008/07/18 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript基本对象
2007/01/11 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
django 将model转换为字典的方法示例
2018/10/16 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python中求对数方法总结
2020/03/10 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
业务部经理岗位职责
2014/01/04 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
使用Ajax实现进度条的绘制
2022/04/07 Javascript