原生 js 实现图片裁剪

<!DOCTYPE HTML>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>图片剪切</title>
</head>
<body>
<div id="box" style="position: absolute;top:0px;left:0px;">
    <img style="position:absolute;top:0px;left:0px;opacity: 0.3;"
         src="" id="img1"/>
    <img style="position:absolute;top:0px;left:0px;clip: rect(50px, 250px, 250px, 50px);"
         src="" id="img2"/>
    <!--第三层需用绝对定位浮在上面-->
    <div id="dragDiv" style="position: absolute;width: 200px;height: 200px;border: 1px solid #fff;top:50px;left:50px;">
        <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 class="Divmin-btn" style="right: 68px;background-color: #2d87f5;">确定</div>
        <div class="Divmin-btn" style="right: 0px;background-color: #f5a52d;">取消</div>
    </div>
</div>

</body>
</html>

<style>
    body {
        background: #333;
    }

    .Divmin-btn {
        bottom: -40px;
        width: 60px;
        height: 30px;
        line-height: 30px;
        color: white;
        font-size: 12px;
        text-align: center;
        display: inline-block;
        position: absolute;
        border-radius: 3px 3px 3px 3px;
    }

    .Divmin-btn:hover {
        background-color: rgba(60, 103, 222, 0.6);
        color: #efeeee;
    }

    .Divmin-btn:active {
        background-color: rgba(69, 94, 167, 0.6);
        color: #efeeee;
    }

    .Divmin {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #fff;
    }

    .up-left {
        margin-top: -4px;
        margin-left: -4px;
        cursor: nw-resize;
    }

    .up {
        left: 50%; /*父元素盒子dragDiv宽度的一半，注意要有绝对定位*/
        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;
    }
</style>

<script type="text/javascript">
    //禁止图片被选中
    document.onselectstart = new Function('event.returnValue = false;');

    //获取id的函数
    function $(id) {
        debugger
        if (id.indexOf(".") == 0) {
            var className = id.substring(1, id.length);
            var els = document.getElementsByClassName(className);
            return els[0];
        }
        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};
    }

    var dragDiv = $('dragDiv');
    var rightDiv = $('.right');
    var isDraging = false;
    var contact = "";//表示被按下的触点
    //鼠标按下时
    $('.right').onmousedown = function () {
        isDraging = true;
        contact = "right";
    }
    $('.left').onmousedown = function () {
        isDraging = true;
        contact = "left";
    }
    $('.down').onmousedown = function () {
        isDraging = true;
        contact = "down";
    }
    $('.up').onmousedown = function () {
        isDraging = true;
        contact = "up";
    }
    $('.up-right').onmousedown = function () {
        isDraging = true;
        contact = "up-right";
    }
    $('.right-down').onmousedown = function () {
        isDraging = true;
        contact = "down-right";
    }
    $('.up-left').onmousedown = function () {
        isDraging = true;
        contact = "up-left";
    }
    $('.left-down').onmousedown = function () {
        isDraging = true;
        contact = "down-left";
    }

    //鼠标松开时
    window.onmouseup = function () {
        isDraging = false;
    }

    //鼠标移动时
    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;
            }
        }
    }

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

    //right移动
    function rightMove(e) {
        var x = e.clientX;//鼠标位置的横坐标
        var widthBefore = dragDiv.offsetWidth - 2;//选取框变化前的宽度
        //var widthBefore = dragDiv.clientWidth;
        var addWidth = x - getPosition(dragDiv).left - widthBefore;//鼠标移动后选取框增加的宽度
        dragDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
        setChoice();
    }

    //down移动
    function downMove(e) {
        var heightBefore = dragDiv.offsetHeight - 2;
        var addHeight = e.clientY - getPosition(dragDiv).top - dragDiv.offsetHeight;
        dragDiv.style.height = heightBefore + addHeight + 'px';
        setChoice();
    }

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

    //设置选取框图片区域明亮显示
    function setChoice() {
        var top = dragDiv.offsetTop;
        var right = dragDiv.offsetLeft + dragDiv.offsetWidth;
        var bottom = dragDiv.offsetTop + dragDiv.offsetHeight;
        var left = dragDiv.offsetLeft;
        $('img2').style.clip = "rect(" + top + "px," + right + "px," + bottom + "px," + left + "px)";
    }
</script>
posted @ 2022-02-22 15:48 牛有肉阅读(494) 评论(0) 编辑收藏举报
刷新页面返回顶部