JavaScript实战练习——图片裁剪

最新推荐文章于 2022-04-11 16:26:24 发布
最新推荐文章于 2022-04-11 16:26:24 发布
阅读量1.8k 收藏 3
点赞数 2
分类专栏： 前端实战练习合集 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_50265804/article/details/123807670
版权

源码：

<!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>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #app {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <script src="/通用资源/publicPackage.js"></script>
    <script>
        var app = document.getElementById('app');
        dealImage(app, '/img/small.jpg');

        function dealImage(dom, url) {
            //创建图片
            var img = new Image();
            //设置图片地址
            img.src = url;
            //图片加载完毕
            img.onload = function () {
                var width = img.width;
                var height = img.height;
                // console.log(img.width, img.height);
                //创建遮罩层
                var layer = document.createElement('div');
                //创建切图层
                var mask = document.createElement('div');
                //创建小圆点
                var dot = document.createElement('div');
                dom.appendChild(layer);
                dom.appendChild(mask);
                mask.appendChild(dot);
                css(dom, {
                    width: width + 'px',
                    height: height + 'px',
                    backgroundImage: 'url(' + url + ')',
                    position: 'relative',
                    border: '1px solid #ccc'
                });
                css(layer, {
                    position: 'absolute',
                    left: 0,
                    top: 0 ,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0, 0, 0, 0.4)'
                });
                css(mask, {
                    width: width / 4 + 'px',
                    height: height / 4 + 'px',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    backgroundImage: 'url(' + url + ')',
                    cursor: 'move'
                });
                css(dot, {
                    width: '10px',
                    height: '10px',
                    position: 'absolute',
                    right: '-5px',
                    bottom: '-5px',
                    borderRadius: '50%',
                    backgroundColor: 'red',
                    cursor: 'default'
                });
                var ox, oy, top, left, maskLeft, maskTop;
                //dot交互
                function moveDot(e) {
                    //鼠标移动时位置
                    var dx = e.clientX;
                    var dy = e.clientY;
                    //新坐标
                    var x = dx - ox + left;
                    var y = dy - oy + top;
                    //边界处理
                    if (x < 0) {
                        x = 0;
                    } else if (x + maskLeft > width) {
                        x = width - maskLeft;
                    };
                    if (y < 0) {
                        y = 0;
                    } else if (y + maskTop > height) {
                        y = height - maskTop;
                    };
                    css(mask, {
                        width: x + 'px',
                        height: y + 'px'
                    });
                };
                bindEvent(dot, 'mousedown', function(e) {
                    //停止冒泡
                    e.stopPropagation();
                    //鼠标点击时位置
                    ox = e.clientX;
                    oy = e.clientY;
                    //mask宽高
                    left = parseInt(getStyle(mask, 'width'));
                    top = parseInt(getStyle(mask, 'height'));
                    //mask原先偏移量
                    maskLeft = mask.offsetLeft;
                    maskTop = mask.offsetTop;
                    bindEvent(document, 'mousemove', moveDot);
                });
                bindEvent(document, 'mouseup', function(e) {
                    removeEvent(document, 'mousemove', moveDot);
                });
                //mask交互
                function moveMask(e) {
                    //鼠标移动时位置
                    var dx = e.clientX;
                    var dy = e.clientY;
                    //移动距离
                    var x = dx - mx + ml;
                    //边界处理
                    var y = dy - my + mt;
                    if (x < 0) {
                        x = 0;
                    } else if (x + mw > width) {
                        x = width - mw;
                    };
                    if (y < 0) {
                        y = 0;
                    } else if (y + mh > height) {
                        y = height - mh;
                    };
                    css(mask, {
                    backgroundPositionX: -x + 'px',
                    backgroundPositionY: -y + 'px',
                    left: x + 'px',
                    top: y + 'px'
                });
                };
                bindEvent(mask, 'mousedown', function(e) {
                    //鼠标点击时位置
                    mx = e.clientX;
                    my = e.clientY;
                    //mask宽高
                    mw = parseInt(getStyle(mask, 'width'));
                    mh = parseInt(getStyle(mask, 'height'));
                    //mask原先偏移量
                    ml = mask.offsetLeft;
                    mt = mask.offsetTop;
                    bindEvent(document, 'mousemove', moveMask);
                });
                bindEvent(document, 'mouseup', function() {
                    removeEvent(document, 'mousemove', moveMask);
                });
            };
        };
    </script>
</body>
</html>

publicPackage.js文件是我自己日常封装的一些方法，这次的实战练习中也有用到getStyle()、removeEvent()、bindEvent()等自己封装的方法（只要你没见过就是我自定义的，别怀疑你自己的小脑瓜子），这次的dealImage()也可以封装好，下次直接调用。这里奉上publicPackage.js文件里面的全部代码。

publicPackage.js

/***
获取任何元素样式
    @element    元素
    @styleName  样式
***/ 
function getStyle(element, styleName) {
    if (window.getComputedStyle) {
        return getComputedStyle(element)[styleName];
    } else{
        var style= element.currentStyle;
        if (style) {
            styleName = styleName.replace(/-([a-z])?/g, function(match, $1) {
                return $1.toUpperCase();
            })
            return style[styleName];
        };
    };
};

/***
实现任何事件绑定(DOM0、DOM2、ie)
    @dom    元素
    @type   事件
    @fn     回调函数
***/ 
function bindEvent(dom, type, fn) {
    if (dom.addEventListener) {
        dom.addEventListener(type, fn);
    } else if (dom.attachEvent) {
        dom.attachEvent('on' + type, function(e) {
            e.target = e.srcElement;
            e.currentTarget = this;
            fn.call(dom, e);    //this指向
        });
    } else {
        var oldFun = dom['on' + type];
        dom['on' + type] = function(e) {
            oldFun && oldFun(e || window.event);
            fn(e || window.event);
        };
    };
};

/***
实现任何事件移除(DOM0、DOM2、ie)
    @dom    元素
    @type   事件
    @fn     回调函数
***/ 
function removeEvent(dom, type, fn) {
    if (dom.removeEventListener) {
        dom.removeEventListener(type, fn);
    } else if (dom.detachEvent) {
        dom.detachEvent('on' + type, fn);
    } else {
        dom['on' + type] = null;
    }
}

/***
封装防抖函数
    @fn     函数
***/ 
function throttle_event(fn) {
    clearTimeout(fn.__timebar);
    fn.__timebar = setTimeout(fn, 200);
};

/***
封装节流函数
    @fn     函数
***/ 
function throttle_time(fn) {
    //lock为true不执行
    if (fn.__lock) {
        return;
    };
    fn.__lock = true;
    fn();
    setTimeout(function() {
        fn.__lock = false;
    },1000);
};

/***
实现设置样式方法 css(dom, width, 200px) 或 css(dom, {width: '200px', color: 'red'})
    @dom    元素
    @key   样式名
    @value     样式值
***/ 
function css(dom, key, value) {
    if (typeof key === 'string') {
        dom.style[key] = value;
    } else {
        for (var name in key) {
            css(dom, name, key[name]);
        }
    }
}

/***
实现任何元素到document的距离
    @dom    元素
***/ 
function offset(dom) {
    var result = {
        left: dom.offsetLeft,
        top: dom.offsetTop
    };
    while (dom !== document.getElementsByTagName('body')[0]) {
        dom = dom.offsetParent;
        result.left += dom.offsetLeft + dom.clientLeft;
        result.top += dom.offsetTop + dom.clientTop;
    }
    return result;
};

/***
封装放大器方法
    @dom    元素
    @url    图片地址
    @width  容器宽度
    @height 容器高度
***/ 
function imageZoom(dom, url, width, height) {
    var mask = document.createElement('div');
    var big = document.createElement('div');
    app.appendChild(mask);
    app.appendChild(big);
    css(app, {
        width: width + 'px',
        height: height + 'px',
        position: 'relative',
        backgroundImage: 'url('+ url +')',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        border: '1px solid #ccc'
    });
    css(mask, {
        width: width / 2 + 'px',
        height: height / 2 + 'px',
        position: 'absolute',
        backgroundColor: 'rgba(214, 235, 99, 0.4)',
        cursor: 'move',
        display: 'none'
    });
    css(big, {
        width: width + 'px',
        height: height + 'px',
        position: 'absolute',
        top: 0,
        left: '100%',
        backgroundImage: 'url('+ url +')',
        backgroundRepeat: 'no-repeat',
        display: 'none'
    });
    //鼠标移入
    bindEvent(app, 'mouseenter', function(e) {
        //鼠标进入时位置
        //mask和big显示
        css(mask, {display: 'block'});
        css(big, {display: 'block'});
        //鼠标移动时位置
        bindEvent(dom, 'mousemove', function(e) {
            var mouse_newX = e.clientX;
            var mouse_newY = e.clientY;
            //mask左顶点位置
            var mask_left = mouse_newX - width / 4 - offset(dom)['left'] + document.documentElement.scrollLeft;
            var mask_top = mouse_newY - height /4 - offset(dom)['top'] + document.documentElement.scrollTop;
            //边界处理(mask始终不能跑到app外头)
            if (mask_left < 0) {
                mask_left = 0;
            } else if (mask_left > width / 2) {
                mask_left = width / 2;
            };
            if(mask_top < 0) {
                mask_top = 0;
            } else if (mask_top > height / 2) {
                mask_top = height / 2;
            }
            //mask位置(mask随鼠标移动而移动)
            css(mask, {left: mask_left + 'px', top: mask_top + 'px'});
            console.log(mask_left, mask_top);
            //big背景图设置
            css(big, {
                backgroundPositionX: '-' + mask_left * 2 + 'px',
                backgroundPositionY: '-' + mask_top * 2 + 'px',
            })
        });
    });
    // 鼠标移出
    bindEvent(app, 'mouseleave', function(e) {
        css(mask, {display: 'none'});
        css(big, {display: 'none'});
    }); 
};

效果演示：

javaScript实战——图片裁剪

邻家的肥猫
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js图片裁剪
01-10
图片裁剪，并预览，java生成图片，参考博客：http://blog.csdn.net/u012385190/article/details/54311051
用JavaScript实现图片剪切效果
weixin_30505043的博客
03-07 431
学会如何获取鼠标的坐标位置以及监听鼠标的按下、拖动、松开等动作事件，从而实现拖动鼠标来改变图片大小。 还可以学习css中的clip属性。 一、CSS实现图片不透明及裁剪效果。 图片剪切三层结构 1、第一层opacity,给图层设置透明度 2、第二层clip，clip属性：对图片进行裁剪，实现图像的一部分显示，其他部分进行隐藏 3、第三层选取框absolute（与第二层重叠的），包括八个...
js实现简单的图片裁剪
05-02
js实现简单的图片裁剪
cropper.js 裁剪图片并上传（文档翻译+demo）
热门推荐
PresByter的博客
12-14 10万+
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/README.md –v3.x版本引入+使用<link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.
基于JavaScript的图片裁剪
我的博客
04-11 1118
图片裁剪库 安装 npm install cropperjs // import 'cropperjs/dist/cropper.css'; import Cropper from 'cropperjs'; const image = document.getElementById('image'); const cropper = new Cropper(image, { viewMode: 1, //定义裁剪框的查看模式 dragMode: 'move', asp
使用JavaScript+canvas实现图片裁剪
10-24
通过结合使用JavaScript和canvas元素，开发者可以实现图片的裁剪功能，这是一种在网页中常用且实用的图像操作技术。接下来，我们将详细探讨如何通过JavaScript和canvas来实现图片的裁剪，以及相关的关键知识点。 ...
javascript 图片裁剪技巧解读
10-27
本文将提供php版的JavaScript裁剪图片代码，仅供大家参考
JavaScript插件 图片裁剪
04-12
本话题主要聚焦于一种特定的应用——图片裁剪功能，这在上传照片、头像编辑或者在线图像处理场景中非常常见。结合PHP后端进行保存，我们可以构建一个完整的前端-后端图像裁剪解决方案。 在JavaScript中，实现图片...
JavaScript实战
07-22
资源名称：JavaScript实战内容简介：本书是一部讲述 Javaｓｃｒｉｐｔ实战项目开发的精彩著作，由两部分组成。第一部分讨论一般性的 Javaｓｃｒｉｐｔ主题，包括 Javaｓｃｒｉｐｔ的简史、好的编码习惯、调试技巧和...
JavaScript组件化开发实战——TodoMVC
09-26
TodoMVC旨在用各种框架实现TodoList的增、删、改、查功能，麻雀虽小，五脏俱全，是供小伙伴学习、练习、再学习的好例子。 虽然官网上有各种实现版本，但仿佛缺少那么一个版本，就是，就是。。。我实现的版本。为此，...
js实现图片裁剪图片.zip
07-04
js实现图片裁剪图片，可以随意裁剪上传图片区域。
原生js+canvas实现图片裁剪
12-22
原生JavaScript+canvas实现图片裁剪功能，介绍css属性clip
基于原生JS实现图片裁剪
10-21
要进行图片编辑，最重要要能够对图片进行裁剪。主要的实现分成两部分，一部分是前端利用js进行裁剪区域选择，第二部分是利用PHP进行后台处理。现在就跟大家分享一下。
js+jquery实现图片裁剪功能
12-12
现在我们在使用各大网站的个人中心时，都有个上传个人头像的功能。用户在上传了个人照片之后，可能不符合网站的要求，于是要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了，原来不懂js的时候，感觉很神奇，太神奇了。心想哪天要是自己也能搞明白这里面的技术，那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~ 下面我们就来用javascript来实现这个功能吧。 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” cont
JavaScript图片裁剪
影魔的专栏
07-19 2012
运用imgareaselect图片裁剪的综合实例
网页端基于js的图片裁剪
qq_41537593的博客
07-27 4929
码云下载
CSS clip:rect矩形剪裁功能及一些应用介绍
http://blog.163.com/xxh_line/
06-28 1512
一、长话短说 CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，貌似大家很少使用此属性。我总结了三点原因：首先是理解上有些门槛；二是其他人使用的不多；三是此属性功能效果有不少替代方案。这种状态有些类
JavaWeb实现图片裁剪上传实战教程
JavaWeb实现裁剪图片上传是一个常见的需求，尤其是在用户需要定制上传头像或者上传特定尺寸照片的应用场景中。本文将详细介绍如何通过整合Jcrop插件和Java后台处理来完成这个过程。以下是整个流程的详细步骤和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

邻家的肥猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值