0

我的目标是能够裁剪 html 文档的任何部分（图像、白色背景），并能够将相同的裁剪区域缩放到小提琴底部的红色方块。这是构建截图工具的最后一步（这只是一个网络工具的实验），我现在需要最后的推动，如果不使用现有的存储库，我似乎无法正确解决这个问题。我可以做到这一点，但毕竟这不是尝试的重点。任何帮助，想法？随意编辑 fiddle ofc

HTML

<div id="selection_box"></div>
<img src="http://popcultureblog.dallasnews.com/files/2012/10/NORAH1BYNOAHABRAMS_27933966.jpeg" id="image_box">
<div id="captured_box"></div>

JavaSctipt

function getCursorPosition(e) {
    e = e || window.event;
    if (e) {
        if (e.pageX || e.pageX == 0) return [e.pageX, e.pageY];
        var dE = document.documentElement || {};
        var dB = document.body || {};
        if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0), e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
    }
    return null;
}

function mousedown(e) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("selection_box");
    box.orig_x = mxy[0];
    box.orig_y = mxy[1];
    box.style.left = mxy[0] + "px";
    box.style.top = mxy[1] + "px";
    box.style.display = "block";
    document.onmousemove = mousemove;
    document.onmouseup = mouseup;
}

function mousemove(e) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("selection_box");
    box.style.width = (mxy[0] - box.orig_x) + "px";
    box.style.height = (mxy[1] - box.orig_y) + "px";
}

function mouseup(e) {
    var mxy = getCursorPosition(e),
        box = document.getElementById("selection_box"),
        image_box = document.getElementById("image_box"),
        selection = getSelection;
    box.style.display = "none";
    box.style.width = "0";
    box.style.height = "0";
    document.onmousemove = function () {};
    document.onmouseup = function () {};
}



document.onmousedown = mousedown;

CSS

* {
    -moz-user-select: none;
    -webkit-user-select: none;
}
#selection_box {
    -webkit-animation: blackwhite 3s infinite;
    display: none;
    position: absolute;
    border: 1px dashed #000000;
    background: transparent;
    width: 0;
    height: 0;
    z-index: 1;
}
@-webkit-keyframes blackwhite {
    40% {
        border-color:white;
    }
    100% {
        border-color:black;
    }
}
#image_box {
    position: absolute;
    top: 75px;
    width: 700px;
    height: 370px;
}
#captured_box {
    position: absolute;
    top: 500px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: red;
}
4

1 回答 1

0

这应该可以解决您实现的问题（这里鼠标也可以从点击点向左和向上移动。）

    function mousemove(e) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("selection_box");
    var right=mxy[0]>box.orig_x;
    var left=!right;
    var up=mxy[1]<box.orig_y;
    var down=!up;


    if(up &&  right){
    box.style.top = mxy[1] + "px";
    }

    else if(up && left){
    box.style.left = mxy[0] + "px";
    box.style.top = mxy[1] + "px";
    }

    else if(down && left){
    box.style.left = mxy[0] + "px";
    box.style.top = mxy[1] - "px";
    }

    box.style.width = (Math.abs(mxy[0] - box.orig_x)) + "px";
    box.style.height = (Math.abs(mxy[1] - box.orig_y)) + "px";
}
于 2013-10-10T14:17:04.590 回答