[DIV+CSS] set the screen capture Part 1 （div截取屏幕）

时间：2021-04-29 09:26:19

使用下面的代码来获取屏幕。用DIV加CSS 来控制。 使用mousemove来获取移动的时候DIV的变化，

效果图如下：

[DIV+CSS] set the screen capture Part 1 （div截取屏幕）

使用5个DIV来组成实现截图目的第一部分，现在只是实现了选择的第一部分。

HTML 部分

 <div id="bg" class="divShawd" onmousedown="mousedown()" onmouseup="mouseup()" onmousemove="mousemove()" ondblclick="confirmCapture()">

    </div>

 <div id="divTop" class="divShawdArea"></div>

 <div id="divLeft" class="divShawdArea"></div>

 <div id="divRight" class="divShawdArea"></div>

 <div id="divBottom" class="divShawdArea"></div>

CSS 部分

.divShawdArea {

    cursor: crosshair;

    position: absolute;

    display: none;

    background-color: black;

    z-index: 1000;

    -moz-opacity: 0.7;

    opacity: .70;

    filter: alpha(opacity=70);

}

.divShawd {

    cursor: crosshair;

    display: none;

    position: absolute;

    top: 0%;

    left: 0%;

    width: 100%;

    height: 100%;

    background-color: black;

    z-index: 1001;

    -moz-opacity: 0.0;

    opacity: .0;

    filter: alpha(opacity=0);

}

JAVASCRIPT 部分

<script type="text/javascript">

    var moveCondition = false;

    var move = false;

    var moveArea = false;

    var moveAreaCondition = false;

    function showdiv() {

        //document.getElementById("bg").style.display = "block";

        $("#bg").show();

        $("#bg").css("cursor", "crosshair");

        moveCondition = true;

    }

    function hidediv() {

        moveCondition = false;

        //document.getElementById("bg").style.display = 'none';

        $("#bg").hide();

        $("#divTop").hide();

        $("#divLeft").hide();

        $("#divRight").hide();

        $("#divBottom").hide();

    }

    var origX = 0, compX = 0, origAreaX = 0, trimX = 0;

    var origY = 0, compY = 0, origAreaY = 0, trimY = 0;

    function mousedown() {

        if (moveCondition) {

            $("#divTop").show();

            $("#divLeft").show();

            $("#divRight").show();

            $("#divBottom").show();

            // $("#show").show();

            move = moveCondition;

            origX = event.clientX;

            origY = event.clientY;

            // $("#show").css("left", event.clientX).css("top", event.clientY);

            // $("#show").css("width", "1").css("height", "1");

            showdivArea(origX, origY, origX + 1, origY + 1);

        } else if (moveAreaCondition) {

            moveArea = true;

            origAreaX = event.clientX;

            origAreaY = event.clientY;

        }

    }

    function mousemove() {

        if (move == true) {

            showdivArea(origX, origY, event.clientX, event.clientY);

        }

        else if (moveArea) {

            trimX = event.clientX - origAreaX;

            trimY = event.clientY - origAreaY;

            //$("#divBottom").html = "X1:" + origX + ",Y1:" + origY + ",X2:" + compX + ",Y2:" + compY;

            showdivArea(origX + trimX, origY + trimY, compX + trimX, compY + trimY);

        }

    }

    function mouseup() {

        move = false;

        moveCondition = false;

        moveAreaCondition = true;

        $("#bg").css("cursor", "pointer");

        compX = event.clientX;

        compY = event.clientY;

        if (moveArea) {

            moveArea = false;

            moveAreaCondition = false;

            origX += trimX;

            origY += trimY;

            compX += trimX;

            compY += trimY;

        }

    }

    function confirmCapture() {

        alert("select area is : (X1:" + origX + ",Y1:" + origY + ",X2:" + compX + ",Y2:" + compY + ")");

        $("#bg").css("cursor", "default");

        hidediv();

    }

    function showdivArea(oX, oY, cX, cY) {

        if (oX > cX) {

            var temp = oX;

            oX = cX;

            cX = temp;

        }

        if (oY > cY) {

            var temp = oY;

            oY = cY;

            cY = temp;

        }

        //$("#show").css("width", compX - origX).css("height", compY - origY);

        $("#divTop").css("left", "0").css("top", "0");

        $("#divTop").css("width", "100%").css("height", oY);

        $("#divLeft").css("left", "0").css("top", oY);

        $("#divLeft").css("width", oX).css("height", cY - oY);

        $("#divRight").css("left", cX).css("top", oY);

        $("#divRight").css("width", screen.width - cX).css("height", cY - oY);

        $("#divBottom").css("left", "0").css("top", cY);

        $("#divBottom").css("width", "100%").css("height", screen.height - cY);

    }

</script>

[PS]: 现在完成了第一部分，选择出需要截取的图片。接下来的思路是：

  1. 通过C#代码，截取当前的屏幕图片。 在通过选择的两个point来截取部分图片。

  2. 截取后的内容保存为图片。然后提示出保存窗口，完成整个的截取过程

相关文章