javascript实现当前页面截屏

javascript实现当前页面截屏

一、前言

有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果。比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存。但又不能安装任何客户端控件,只能用javascript实现.网上搜索了一下,没有可用的方案(http://www.2cto.com/kf/201301/184453.html,这个虽然提供了方法,但是在实际使用中无法满足,例如支持低版本的IE,支持内嵌的iframe截图)。但是也找到了一些可能的思路,经过几天奋战,终于完成一个可用的javascript截屏思路。因为是javascript,所以还是会有一些限制,例如只能在页面内截屏,截屏范围不能超出当前页面等。还好这些是客户没有要求的。

二、演示地址及说明

下面是效果图和演示地址。

(不好意思,本来打算提供演示地址,因为一些原因暂时无法提供,以后能提供的时候再把地址写上)

登陆进去后,点击页面顶部的 打开截屏控制器 按钮,然后在点击 截屏 按钮,这时候整个页面处于截屏状态,按下鼠标左键并移动鼠标,画出截屏区域,然后双击截屏区域就可将当前区域保存为图片下载。

三、实现思路及主要问题

因为系统中集成的代码比较多,所以无法直接贴出源代码,这里只给出具体的思路,和实现过程中遇到的难点问题并给出难点问题的一些参考代码。

具体的思路其实不难,需要有服务器端的配合,这里的服务器使用asp.net。主要有以下几个步骤:

1、获取当前页面dom的html保存。

2、将html代码发送到服务器

3、在服务器端使用浏览器对象重新载入代码,还原用户当时的页面状态

4、使用浏览器对象的生成图片功能生成图片

上面是总体的思路,在实现的过程中需要注意一些细节问题。

1、第一个问题就是获取当前用户页面的dom的html。对于IE来说,使用outerHTML就可以了,但是对于非IE浏览器,使用outerHTML无法获取用户做过修改的内容。这里就需要做一下修改。在jquery中,有一个.html()方法,这个方法返回的是innerHTML,估计jquery内部也是用了浏览器本身的innerHTML方法,所以这个.html()也无法获取用户修改后的页面dom代码。下面代码就是对.html()方法做一些修改,已支持获取用户修改后的内容。

(function ($) {

var oldHTML = $.fn.html;

$.fn. newhtml = function () {

if (arguments.length) return oldHTML.apply(this, arguments);

$("input,,button", this).each(function () {

this.setAttribute(‘value‘, this.value);

});

$(":radio,:checkbox", this).each(function () {

if (this.checked) this.setAttribute(‘checked‘, ‘checked‘);

else this.removeAttribute(‘checked‘);

});

$("option", this).each(function () {

if (this.selected) this.setAttribute(‘selected‘, ‘selected‘);

else this.removeAttribute(‘selected‘);

});

$("textarea", this).each(function () {

this.innerHTML = this.value;

});

return oldHTML.apply(this);

};

})(jQuery);

}

2、第二个问题就是服务器的浏览器对象,在asp.net中,我们可以使用System.Windows.Forms

.WebBrowser这个对象。为了能在asp.net中使用这个对象,.aspx页面的Page标签内必须使用 AspCompat="true"属性,否则会出错。这方面的代码网上有很多,这里就不在贴代码了,大家自行google就可以了。

剩下的就是具体实现的小问题,比如要记录当前截屏区的位置和大小等等。

有了以上的实现思路,我们还可以做很多其他的工作。例如将页面指定的控件另存的图片,这个功能有很多用处,比如有一个web页面的统计报表,但是客户需要的是一个图片形式的,或者pdf,或者word格式的文档,我们就可以利用这种方法,将指定控件的内容生成图片,然后在服务器端生成pdf或者word,将图片插入即可。

四、缺点

这种方法因为是在服务器端重现用户当时的页面信息,尽量还原当时的状态,但并不能做到完全一致,因为页面的状态信息是无法在服务器端完全复制和还原的。比如,客户端的一些activeX控件无法再服务器端重新,如果客户端是非IE浏览器,截屏的效果可能和实际效果不同(当然如果您访问的页面已经做了浏览器兼容,在不同浏览器访问时效果一样,那么也就不会有问题了),因为服务器端的浏览器(我们用的是window平台技术)是IE。

五、后续

本章介绍了截屏的基本原理和实现思路,下面两章讲一讲另存页面或者页面内指定控件内容为图片,以及使用javascript录制屏幕,然后播放视屏的方法。

javascript实现当前页面截屏

时间: 2024-10-14 08:24:10

javascript实现当前页面截屏的相关文章

pytest框架优化——将异常截屏图片加入到allure报告中

痛点分析: 在做allure定制化的时候,关于附件添加这一块,我们在代码里可以添加我们准备好的附件,这里用图片,通过下面的方法就能实现 allure.attach(file, '图片描述', allure.attachment_type.PNG) 那如果我们执行测试用例生成的allure测试报告中,能把失败或者异常的测试用例的异常截图也自动添加到allure报告中,岂不更完美? 问题思考: 1.用例执行完后,异常截图图片都在OutPus目录下,怎么去跟用例关联? 2.用什么方法去添加到allur

Html5 实现网页截屏 页面生成图片(图文)

html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能. 因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样. 环境要求: jQuery兼容性: Firefox 3.5+, Chrome, Opera, IE9 官网主页: http://html2canvas.hertzen.com/ 测试生成的图片效果 有些元素的样式没有完全展示出来 1 <html> 2 <head> 3 <meta name=&q

Javascript网页截屏的方法

最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上.目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果. 之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法,这些都是在为这个插件做技术准备. 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容转换成图片,保存到本地,最后上传到微博. 我在网上搜寻到html2canvas这个能将指定网页元素内容生成canvas图像的javascri

使用 JavaScript 截屏

经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能实现网页截屏,就算以后能够实现,也一定是浏览器提供了相关接口,JS 去调用这些接口.既然不能截屏,那我们能做的只有通过拿到像素点的信息来"拼凑"图片. 先说说我们看到的截屏方式 用过 phantomJS 的同学都知道,它提供了一个截屏函数,通过它可以整屏获取页面截图,而且他支持的格式也比较

phantomjs介绍-(js网页截屏、javascript网页解析渲染工具)

phantomjs介绍-(js网页截屏.javascript网页解析渲染工具) phantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器,这样访问网页就省去了浏览器的界面绘制所消耗的系统资源,比较适合用于网络测试等应用 .利用这个工具,我们可以轻松的搭建一个接口用于获取我们想要的url的整页截屏. PhantomJS is a headless WebKit with JavaScript API. It has fast and native support

nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储

近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs. 官网上的介绍是:”PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.”翻译过来就是:”PhantomJS

Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三(页面滚屏,模拟鼠标拖动滚动条)

日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资源,当然,最重要的还是未能达到自己的预期,是不是很内伤啊.此时,我们就不得不像正常用户操作一样,通过滚动页面至相应的区域,那么该如何滚动呢,此文就此给出答案. 此文实现的页面滚动,是通过 js 操作实现的,敬请各位小主参阅.若有不足之处,敬请大神指正,非常感谢! 直接上码了...... 1 /**

Java实现网页截屏功能(基于phantomJs)

公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上的一些文章可以发现有以下几种实现方式:参考文章https://blog.csdn.net/wanglq0086/article/details/60761614 Robot 利用JNI,调用第三方C/C++组件 DJNativeSwing组件 利用html2canvas 利用html2image p

网页html截屏转图片(二)PhantomJS

关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG.PhantomJS可以用于页面自动化,网络监测,网页截屏,以及无界面测试等. 我们还可以用它来做爬虫哦,大家知道,网页上有些数据是通过执行js渲染出来的,这样的话爬虫去抓取数据的时候就会很麻烦,PhantomJS自带WebKit内核,我们可以利用Ph