使用下面的代码来获取屏幕。用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 部分

  1. .divShawdArea {
  2. cursor: crosshair;
  3. position: absolute;
  4. display: none;
  5. background-color: black;
  6. z-index: 1000;
  7. -moz-opacity: 0.7;
  8. opacity: .70;
  9. filter: alpha(opacity=70);
  10. }
  11.  
  12. .divShawd {
  13. cursor: crosshair;
  14. display: none;
  15. position: absolute;
  16. top: 0%;
  17. left: 0%;
  18. width: 100%;
  19. height: 100%;
  20. background-color: black;
  21. z-index: 1001;
  22. -moz-opacity: 0.0;
  23. opacity: .0;
  24. filter: alpha(opacity=0);
  25. }

JAVASCRIPT 部分

  1. <script type="text/javascript">
  2. var moveCondition = false;
  3. var move = false;
  4. var moveArea = false;
  5. var moveAreaCondition = false;
  6.  
  7. function showdiv() {
  8. //document.getElementById("bg").style.display = "block";
  9. $("#bg").show();
  10. $("#bg").css("cursor", "crosshair");
  11.  
  12. moveCondition = true;
  13. }
  14.  
  15. function hidediv() {
  16. moveCondition = false;
  17. //document.getElementById("bg").style.display = 'none';
  18. $("#bg").hide();
  19. $("#divTop").hide();
  20. $("#divLeft").hide();
  21. $("#divRight").hide();
  22. $("#divBottom").hide();
  23. }
  24.  
  25. var origX = 0, compX = 0, origAreaX = 0, trimX = 0;
  26. var origY = 0, compY = 0, origAreaY = 0, trimY = 0;
  27.  
  28. function mousedown() {
  29. if (moveCondition) {
  30.  
  31. $("#divTop").show();
  32. $("#divLeft").show();
  33. $("#divRight").show();
  34. $("#divBottom").show();
  35. // $("#show").show();
  36.  
  37. move = moveCondition;
  38. origX = event.clientX;
  39. origY = event.clientY;
  40. // $("#show").css("left", event.clientX).css("top", event.clientY);
  41. // $("#show").css("width", "1").css("height", "1");
  42. showdivArea(origX, origY, origX + 1, origY + 1);
  43. } else if (moveAreaCondition) {
  44. moveArea = true;
  45. origAreaX = event.clientX;
  46. origAreaY = event.clientY;
  47. }
  48. }
  49.  
  50. function mousemove() {
  51. if (move == true) {
  52. showdivArea(origX, origY, event.clientX, event.clientY);
  53. }
  54. else if (moveArea) {
  55. trimX = event.clientX - origAreaX;
  56. trimY = event.clientY - origAreaY;
  57. //$("#divBottom").html = "X1:" + origX + ",Y1:" + origY + ",X2:" + compX + ",Y2:" + compY;
  58. showdivArea(origX + trimX, origY + trimY, compX + trimX, compY + trimY);
  59. }
  60. }
  61.  
  62. function mouseup() {
  63. move = false;
  64. moveCondition = false;
  65. moveAreaCondition = true;
  66. $("#bg").css("cursor", "pointer");
  67.  
  68. compX = event.clientX;
  69. compY = event.clientY;
  70.  
  71. if (moveArea) {
  72. moveArea = false;
  73. moveAreaCondition = false;
  74.  
  75. origX += trimX;
  76. origY += trimY;
  77. compX += trimX;
  78. compY += trimY;
  79. }
  80. }
  81.  
  82. function confirmCapture() {
  83. alert("select area is : (X1:" + origX + ",Y1:" + origY + ",X2:" + compX + ",Y2:" + compY + ")");
  84. $("#bg").css("cursor", "default");
  85. hidediv();
  86. }
  87.  
  88. function showdivArea(oX, oY, cX, cY) {
  89.  
  90. if (oX > cX) {
  91. var temp = oX;
  92. oX = cX;
  93. cX = temp;
  94. }
  95.  
  96. if (oY > cY) {
  97. var temp = oY;
  98. oY = cY;
  99. cY = temp;
  100. }
  101.  
  102. //$("#show").css("width", compX - origX).css("height", compY - origY);
  103.  
  104. $("#divTop").css("left", "0").css("top", "0");
  105. $("#divTop").css("width", "100%").css("height", oY);
  106.  
  107. $("#divLeft").css("left", "0").css("top", oY);
  108. $("#divLeft").css("width", oX).css("height", cY - oY);
  109.  
  110. $("#divRight").css("left", cX).css("top", oY);
  111. $("#divRight").css("width", screen.width - cX).css("height", cY - oY);
  112.  
  113. $("#divBottom").css("left", "0").css("top", cY);
  114. $("#divBottom").css("width", "100%").css("height", screen.height - cY);
  115.  
  116. }
  117.  
  118. </script>

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

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

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

[DIV+CSS] set the screen capture Part 1 (div截取屏幕)的更多相关文章

  1. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  2. 使用div+css制作简单导航 以及要注意问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [转] 深度解剖DIV+CSS工作原理

    本文和大家重点讨论一下DIV+CSS工作原理,在一般情况的DIV+CSS开发静态html网页时,我们把html和CSS是分开的,形成html页面和CSS文件. DIV+CSS原理解剖 在一般情况的DI ...

  4. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  5. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  6. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  7. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  8. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  9. 网页代码DIV+CSS布局积累

    11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#me ...

随机推荐

  1. Eclipse 设置背景色

    window -> preferences ->  General -> Editors -> Test Editors -> Background color 勾掉Sy ...

  2. edusoho -A5: ApiBundle UML

    edusoho -A5:  ApiBundle UML

  3. CF765F Souvenirs

    CF765F Souvenirs [CF765F]Souvenirs 主席树 - CQzhangyu - 博客园 其实不用主席树 感觉像是离线问题 但是不能支持差分.分治又处理不了 考虑按照右端点排序 ...

  4. 你可能不知道的 Mac 技巧 - 文本操作

    找不到 Mac 上的 Home,End,PageUp?想截图还得打开 QQ?不知道 Mac 如何剪切文件?找不到全屏窗口的按钮?找不到隐藏文件夹?不知道如何向后删除?想少用鼠标,多用键盘?…… 希望我 ...

  5. 应用调试(一)strace

    目录 编译 使用 原理 深入文档 title: 应用调试(一)strace date: 2019/1/15 23:35:14 toc: true --- 编译 #tar -xjf strace-4.5 ...

  6. 第五节: Quartz.Net五大构件之Trigger的四大触发类

    一. WithSimpleSchedule(ISimpleTrigger) 1. 用途:时.分.秒上的轮询(和timer类似),实际开发中,该场景占绝大多数. 2. 轮询的种类:永远轮询和限定次数轮询 ...

  7. django - 总结 - 用户认证组件

    用户认证组件 from django.contrib import auth 从auth_user表中获取对象,没有返回None,其中密码为密文,使用了加密算法 user = auth.authent ...

  8. C++-int类型整数超出范围后的处理

    最近做了一道题目: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: ...

  9. SpringBoot系列: SpringBoot Web项目中使用Shiro 之二

    ==================================Shiro 的加深理解:==================================1. Shiro 和 Spring 系组 ...

  10. JAVA传递带有空格的参数

    String s="b2 + b1"; Process child = Runtime.getRuntime().exec("C:\\eclipse-workspace\ ...