js实现图片裁剪效果

最新推荐文章于 2024-07-15 15:54:21 发布
最新推荐文章于 2024-07-15 15:54:21 发布
阅读量7.6k 收藏 4
点赞数 1
分类专栏： JS CSS html5 文章标签： js实现图片裁剪效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DreamFJ/article/details/82842715
版权
JS 同时被 3 个专栏收录
116 篇文章 1 订阅
订阅专栏
CSS
52 篇文章 1 订阅
订阅专栏
html5
38 篇文章 0 订阅
订阅专栏

注意：img设置clip样式属性时要先设置position:absolute。

裁剪的效果其实由两张图叠加形成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片裁剪</title>
    <style>
        body {
            background-color: grey;
        }
        
        .container {
            position: relative;
            width: 400px;
            height: 200px;
        }
        
        #img1 {
            opacity: 0.4;
            position: absolute;
            left: 0;
            top: 0;
        }
        /* 两张图片的位置要一样 */
        
        #img2 {
            position: absolute;
            left: 0;
            top: 0;
            /* 裁剪 */
            clip: rect(0px, 102px, 102px, 0px);
        }
        
        #drag {
            width: 100px;
            height: 100px;
            border: 1px solid white;
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
        }
        
        .stretch {
            width: 6px;
            height: 6px;
            position: absolute;
            background-color: white;
        }
        
        .tl-stretch {
            cursor: nwse-resize;
            left: 0;
            top: 0;
            transform: translate(-50%, -50%);
        }
        
        .t-stretch {
            cursor: ns-resize;
            left: 50%;
            top: 0;
            transform: translate(-50%, -50%);
        }
        
        .tr-stretch {
            cursor: nesw-resize;
            right: 0;
            top: 0;
            transform: translate(50%, -50%);
        }
        
        .r-stretch {
            cursor: ew-resize;
            right: 0;
            top: 50%;
            transform: translate(50%, -50%);
        }
        
        .br-stretch {
            cursor: nwse-resize;
            right: 0;
            bottom: 0;
            transform: translate(50%, 50%);
        }
        
        .b-stretch {
            cursor: ns-resize;
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 50%);
        }
        
        .bl-stretch {
            cursor: nesw-resize;
            left: 0;
            bottom: 0;
            transform: translate(-50%, 50%);
        }
        
        .l-stretch {
            cursor: ew-resize;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .show {
            position: absolute;
            left: 450px;
            width: 400px;
            height: 200px;
        }
        
        #img3 {
            position: relative;
            clip: rect(0px, 102px, 102px, 0px);
        }
    </style>
</head>

<body>
    <div class="container">
        <img id="img1" src="sensor.jpg" alt="猫咪老师" width="400" height="200">
        <img id="img2" src="sensor.jpg" alt="猫咪老师" width="400" height="200">
        <div id="drag">
            <div id="tl-stretch" class="stretch tl-stretch"></div>
            <div id="t-stretch" class="stretch t-stretch"></div>
            <div id="tr-stretch" class="stretch tr-stretch"></div>
            <div id="r-stretch" class="stretch r-stretch"></div>
            <div id="br-stretch" class="stretch br-stretch"></div>
            <div id="b-stretch" class="stretch b-stretch"></div>
            <div id="bl-stretch" class="stretch bl-stretch"></div>
            <div id="l-stretch" class="stretch l-stretch"></div>
        </div>
        <!-- 预览区 -->
        <div class="show">
            <img id="img3" src="sensor.jpg" alt="猫咪老师" width="400" height="200">
        </div>
    </div>
    <script>
        window.onload = function() {
            // 禁止图片选中
            // document.onselectstart = new Function('event.returnValue=false;');
            document.onselectstart = function(e) {
                var e = e || window.event;
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
            };

            var drag = getDom("drag");
            var img1 = getDom("img1");
            var img2 = getDom("img2");
            var img3 = getDom("img3");

            // 拖拽drag裁剪窗口
            drag.onmousedown = function(e) {
                // 记下鼠标距离裁剪框左边和上边的距离
                var disX = e.clientX - drag.offsetLeft;
                var disY = e.clientY - drag.offsetTop;
                document.onmousemove = function(e) {
                    var dragLeft = Math.min(img2.clientWidth - drag.offsetWidth, Math.max(0, e.clientX - disX));
                    var dragTop = Math.min(img2.clientHeight - drag.offsetHeight, Math.max(0, e.clientY - disY));
                    drag.style.left = dragLeft + 'px';
                    drag.style.top = dragTop + 'px';
                    setClip();
                };
                document.onmouseup = on_up;
            };

            // 点击向右延伸按钮
            var rStretch = getDom("r-stretch");
            rStretch.onmousedown = function(e) {
                e.stopPropagation();
                document.onmousemove = function(e) {
                    move_r(e);
                    setClip();
                };
                document.onmouseup = on_up;
            };

            // 向左延伸按钮
            var lStretch = getDom("l-stretch");
            lStretch.onmousedown = function(e) {
                e.stopPropagation();
                var maxLeft = drag.offsetLeft + drag.offsetWidth;
                document.onmousemove = function(e) {
                    move_l(e, maxLeft);
                    setClip();
                };
                document.onmouseup = on_up;
            };

            // 向下延伸按钮
            var bStretch = getDom("b-stretch");
            bStretch.onmousedown = function(e) {
                e.stopPropagation();
                document.onmousemove = function(e) {
                    move_b(e);
                    setClip();
                };
                document.onmouseup = on_up;
            };

            // 向上延伸按钮
            var tStretch = getDom("t-stretch");
            tStretch.onmousedown = function(e) {
                e.stopPropagation();
                var maxTop = drag.offsetTop + drag.offsetHeight;
                document.onmousemove = function(e) {
                    move_t(e, maxTop);
                    setClip();
                };
                document.onmouseup = on_up;
            };

            // 右下延伸按钮
            var brStretch = getDom("br-stretch");
            brStretch.onmousedown = function(e) {
                e.stopPropagation();
                document.onmousemove = function(e) {
                    // 裁剪窗口右边不能超出图片
                    move_r(e);
                    move_b(e);
                    setClip();
                };
                document.onmouseup = on_up;
            };
            // 左下按钮
            var blStretch = getDom("bl-stretch");
            blStretch.onmousedown = function(e) {
                e.stopPropagation();
                var maxLeft = drag.offsetLeft + drag.offsetWidth;
                document.onmousemove = function(e) {
                    // 裁剪窗口右边不能超出图片
                    move_l(e, maxLeft);
                    move_b(e);
                    setClip();
                };
                document.onmouseup = on_up;
            };
            // 左上和右上省略
        };

        function getDom(id) {
            return document.getElementById(id);
        }

        // 右移
        function move_r(e) {
            // 裁剪窗口右边不能超出图片
            var maxW = img2.clientWidth - drag.offsetLeft - 2;
            var dragW = e.clientX - drag.getBoundingClientRect().left;
            drag.style.width = Math.min(Math.max(0, dragW), maxW) + 'px';
        }
        // 下移
        function move_b(e) {
            // 裁剪窗口下边不能超出图片
            var maxH = img2.clientHeight - drag.offsetTop - 2;
            var dragH = e.clientY - drag.getBoundingClientRect().top;
            drag.style.height = Math.min(Math.max(0, dragH), maxH) + 'px';
        }
        // 左移
        function move_l(e, maxLeft) {
            // 裁剪窗口左边不能超出图片
            var maxW = drag.offsetLeft + drag.offsetWidth - 2;
            var disW = drag.getBoundingClientRect().left - e.clientX;

            drag.style.width = Math.min(Math.max(0, drag.clientWidth + disW), maxW) + 'px';
            drag.style.left = Math.max(Math.min(maxLeft, drag.offsetLeft - disW), 0) + 'px';
        }
        // 上移
        function move_t(e, maxTop) {
            // 裁剪窗口上边不能超出图片
            var maxH = drag.offsetTop + drag.offsetHeight - 2;
            var disH = drag.getBoundingClientRect().top - e.clientY;
            drag.style.height = Math.min(Math.max(0, drag.clientHeight + disH), maxH) + 'px';
            drag.style.top = Math.max(Math.min(maxTop, drag.offsetTop - disH), 0) + 'px';
        }

        // 设置图片的clip区域
        function setClip() {
            var top = drag.offsetTop,
                right = drag.offsetLeft + drag.offsetWidth,
                bottom = drag.offsetTop + drag.offsetHeight,
                left = drag.offsetLeft;
            img2.style.clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
            img3.style.top = -top + 'px';
            img3.style.left = -left + 'px';
            img3.style.clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
        }

        // 解绑
        function on_up() {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    </script>
</body>

</html>

 

jojo付啾啾
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript图片裁剪
影魔的专栏
07-19 2013
运用imgareaselect图片裁剪的综合实例
实战学javascript——用js实现图片剪辑（上）
fareise的博客
10-14 1748
利用js实现图片的剪辑等现在web常用的方式
js图片裁剪
01-10
图片裁剪，并预览，java生成图片，参考博客：http://blog.csdn.net/u012385190/article/details/54311051
前端实现图片裁剪功能，插件版和原生版
最新发布
qq_53080558的博客
07-15 574
【代码】【无标题】
JavaScript实战练习——图片裁剪
sinat_50265804的博客
03-28 1883
源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
js 图片裁剪器的使用
259的博客
02-09 324
js 图片裁剪器的使用
JS-Crop-Image:交互式图像裁剪区域选择器
06-19
JS-裁剪图像 交互式图像裁剪区域选择器 概要 < script src = crop-image.js > </ script > < script > var target_image = document . getElementById ( 'img' ) ; var crop_handle = crop_image ( target_image , [ ratio ] , function ( crop_region ) { // when the crop region changed, notify with crop_region console . log ( crop_region . w + 'x' + crop_region . h + '+' + crop_region . x + '+' + crop_region . y ) ;
js实现图片裁剪图片特效代码
03-20
`js实现图片裁剪图片特效代码`这个标题暗示我们将探讨一个基于JavaScript和jQuery的图片裁剪解决方案。 首先，让我们了解图片裁剪的基本原理。图片裁剪通常涉及到两个主要步骤：预览和裁剪。用户上传图片后，系统会...
基于原生JS实现图片裁剪
12-02
在本文中，我们将探讨如何使用原生JavaScript实现一个图片裁剪功能。首先，我们要了解两种主要的实现方式：HTML5的拖拽事件（drag drop）和传统的鼠标事件（mousedown、mousemove）。在这里，我们将采用第二种方法，...
js实现图片裁剪图片网页特效
11-24
总的来说，JavaScript实现图片裁剪功能涉及HTML5的新特性，如FileReader API、Canvas绘图以及事件处理。通过这些技术，我们可以为用户提供一个完整的图片裁剪体验。在实际项目中，可能还需要考虑性能优化、错误处理...
Jquery 图片裁剪,编辑
06-22
可以像CSDN编辑用户头像一样，实现无刷新的编辑图片头像功能。
js实现图片裁剪图片.zip
07-04
js实现图片裁剪图片，可以随意裁剪上传图片区域。
H5实现读取图片裁剪及上传功能
06-16
接下来，我们需要实现图片裁剪功能。这通常通过JavaScript库如Cropper.js或者JQuery Cropper来完成。这两个库提供了强大的图像裁剪功能，可以设置裁剪区域的大小、比例等。例如，使用Cropper.js： ```html ``` ``...
第11天 使用js实现一个图片剪裁的功能
qq_36529240的博客
12-14 1402
/** * 裁切图片 * @param imgUrl 原始图片路径 * @param x,y,width,height 从点[x, y]开始，将宽度width,高度height的区域裁切下来 * tips：需要运行于服务器环境下切图片为同域 */ function clipImage(imgUrl, x, y, width, height) { return new Promise((resolve, reject) => { let cvs = document.
使用js实现图片裁剪
justinytsoft的博客
09-21 5627
裁剪过后会生成一个 base64 的字符串， 可以直接赋值到 img 标签的 src 属性上可以实现预览。    保存的时候也是把这个字符串传到后台，后台使用相应的类进行解析并生成图片。 额。。。 我没找到上传附件的地方，要demo的可以给我留言。 如果知道怎么上传附件的兄台请告知下  谢谢 下图是demo的运行截图
CSS clip:rect矩形剪裁功能及一些应用介绍
http://blog.163.com/xxh_line/
06-28 1532
一、长话短说 CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，貌似大家很少使用此属性。我总结了三点原因：首先是理解上有些门槛；二是其他人使用的不多；三是此属性功能效果有不少替代方案。这种状态有些类
图片超过边框大小时截取图片中间部分
he3236220的博客
10-26 2287
图片超过边框大小时截取图片中间部分        无标题文档    function Zoom(obj,width, height) { var img=new Image();  img.src=obj.src;  var scale=Math.max(width/img.width, height/img.height);  var newWidth=img.width
JavaScript 实现图片等比缩放
web前端开发
02-01 997
来源 |https://www.lebang2020.cn/details/210124ycbfvuqd.html在开发网页的时候少不了图片，展示图片时自然会遇到缩放问题。一般情况下只...
JavaWeb实现图片裁剪上传实战教程
JavaWeb实现图片裁剪上传的关键在于前端与后台的配合。前端通过Jcrop收集用户裁剪区域，然后将数据传递给后端，后端负责处理图片的压缩、裁剪和存储。这个过程不仅涉及前端的HTML、CSS和JavaScript，也包括后端的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值