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

html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。

因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。

环境要求: jQuery
兼容性: Firefox 3.5+, Chrome, Opera, IE9

官网主页http://html2canvas.hertzen.com/

测试生成的图片效果 有些元素的样式没有完全展示出来

 1 <html>
 2     <head>
 3         <meta name="layout" content="main">
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 6         <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
 7
 8         <script  type="text/javascript" >
 9         $(document).ready( function(){
10                 $(".example1").on("click", function(event) {
11                         event.preventDefault();
12                         html2canvas(document.body, {
13                         allowTaint: true,
14                         taintTest: false,
15                         onrendered: function(canvas) {
16                             canvas.id = "mycanvas";
17                             //document.body.appendChild(canvas);
18                             //生成base64图片数据
19                             var dataUrl = canvas.toDataURL();
20                             var newImg = document.createElement("img");
21                             newImg.src =  dataUrl;
22                             document.body.appendChild(newImg);
23                         }
24                     });
25                 });
26
27         });
28
29         </script>
30     </head>
31     <body>
32
33         Hello!
34         <div class="" style="background-color: #abc;">
35             计算机天堂测试html5页面截图
36             <br>jsjtt.com
37         </div>
38
39         <textArea id="textArea" col="20" rows="10" ></textArea>
40         <input class="example1" type="button" value="button">
41         生成界面如下:
42     </body>
43 </html>

说明在测试过程中出现的问题如果页面上引用跨域的图片文件调用toDataURL的时候会出错

SecurityError: The operation is insecure.

解决方法:在跨域的服务器上设置header设置为允许跨域请求

access-control-allow-origin: *  access-control-allow-credentials: true

原始地址:计算机天堂---html5 实现网页截屏 页面生成图片    http://www.jsjtt.com/webkaifa/html5/2013-10-29/42.html

时间: 2024-10-06 23:43:45

Html5 实现网页截屏 页面生成图片(图文)的相关文章

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

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

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

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

如何做一个简单的Chrome Extension用于网页截屏

Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等). Chrome Extension开发指南 Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples 如何实现网页截屏功能 看一下manifest文件: {       "name": "Scree

网页截屏调研记录

对于普通网页,截屏的实现并不难,网上也有成熟的插件,使用最多的应该是html2canvas,自己也试了下,能达到效果,我以为这部分的工作就这么简单交差了 然而我们的网页并不普通,网页中还嵌入了视频,而且不是同源的,导致截出来的图片视频区域是空白 网上继续查资料,才发现是跨域问题 继续查找能不能解决跨域问题,html2canvas是有配置,然而其针对的是服务端允许跨域的情况,意思是说服务端不允许跨域,设置了也没效果,而我们网页的视频源也没办法设置 很绝望,继续查找资料 大概了解到网页截屏不管什么插

Javascript网页截屏的方法

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

JAVA之网页截屏

之前我也写过JAVA实现截屏效果,用了两三种方法,发现还是现在的这种方法最简单.但是要注意的是此方法仅适用于JdK1.6及以上版本. import java.awt.AWTException; import java.awt.Desktop; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Image; import java.awt.Rectangle; import java.awt.Robot; im

Java实现网页截屏

代码如下 <span style="font-size:18px;">package com.util; import java.awt.AWTException; import java.awt.Desktop; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Image; import java.awt.Rectangle; import java.awt.Robot; impor

Chrome浏览器网页截全屏算法以及实现

做个一个简单的批量下载插件叫“挖一下”, 正如插件的名字一样,采集网页里面的所有图片,根据筛选条件过滤不需要的图片,最后下载选中的图片. 索性把网页也一起给截了,截屏分两种: 1.可见内容截屏 2.完整网页截屏(包括可见和不可见) 可见内容截屏: 实现原理:直接通过chrome自带的截屏方法(chrome.tabs.captureVisibleTab),回调函数返回图片类型和数据信息 chrome.tabs.captureVisibleTab({format:'png'}, function(s

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

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