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

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

效果图如下：

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

HTML 部分

1 <div id="bg" class="divShawd" onmousedown="mousedown()" onmouseup="mouseup()" onmousemove="mousemove()" ondblclick="confirmCapture()">
2    </div>
3 <div id="divTop" class="divShawdArea"></div>
4 <div id="divLeft" class="divShawdArea"></div>
5 <div id="divRight" class="divShawdArea"></div>
6 <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. 截取后的内容保存为图片。然后提示出保存窗口，完成整个的截取过程