[DIV+CSS] set the screen capture Part 1 (div截取屏幕)
使用下面的代码来获取屏幕。用DIV加CSS 来控制。 使用mousemove来获取移动的时候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]: 现在完成了第一部分,选择出需要截取的图片。接下来的思路是:
通过C#代码,截取当前的屏幕图片。 在通过选择的两个point来截取部分图片。
截取后的内容保存为图片。然后提示出保存窗口,完成整个的截取过程
[DIV+CSS] set the screen capture Part 1 (div截取屏幕)的更多相关文章
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- 使用div+css制作简单导航 以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [转] 深度解剖DIV+CSS工作原理
本文和大家重点讨论一下DIV+CSS工作原理,在一般情况的DIV+CSS开发静态html网页时,我们把html和CSS是分开的,形成html页面和CSS文件. DIV+CSS原理解剖 在一般情况的DI ...
- div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
- DIV+CSS IE6/IE7/IE8/FF兼容问题汇总
1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- 网页代码DIV+CSS布局积累
11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#me ...
随机推荐
- Eclipse 设置背景色
window -> preferences -> General -> Editors -> Test Editors -> Background color 勾掉Sy ...
- edusoho -A5: ApiBundle UML
edusoho -A5: ApiBundle UML
- CF765F Souvenirs
CF765F Souvenirs [CF765F]Souvenirs 主席树 - CQzhangyu - 博客园 其实不用主席树 感觉像是离线问题 但是不能支持差分.分治又处理不了 考虑按照右端点排序 ...
- 你可能不知道的 Mac 技巧 - 文本操作
找不到 Mac 上的 Home,End,PageUp?想截图还得打开 QQ?不知道 Mac 如何剪切文件?找不到全屏窗口的按钮?找不到隐藏文件夹?不知道如何向后删除?想少用鼠标,多用键盘?…… 希望我 ...
- 应用调试(一)strace
目录 编译 使用 原理 深入文档 title: 应用调试(一)strace date: 2019/1/15 23:35:14 toc: true --- 编译 #tar -xjf strace-4.5 ...
- 第五节: Quartz.Net五大构件之Trigger的四大触发类
一. WithSimpleSchedule(ISimpleTrigger) 1. 用途:时.分.秒上的轮询(和timer类似),实际开发中,该场景占绝大多数. 2. 轮询的种类:永远轮询和限定次数轮询 ...
- django - 总结 - 用户认证组件
用户认证组件 from django.contrib import auth 从auth_user表中获取对象,没有返回None,其中密码为密文,使用了加密算法 user = auth.authent ...
- C++-int类型整数超出范围后的处理
最近做了一道题目: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: ...
- SpringBoot系列: SpringBoot Web项目中使用Shiro 之二
==================================Shiro 的加深理解:==================================1. Shiro 和 Spring 系组 ...
- JAVA传递带有空格的参数
String s="b2 + b1"; Process child = Runtime.getRuntime().exec("C:\\eclipse-workspace\ ...