html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

如果你想将网页的某一部分或者全部进行截图从而来生成图片保存,那么html2canvas将会是一个很好的选择!

以下是html2canvas的使用教程:

1.使用jquery插件html2canvas对网页的某一部分截图(根据元素节点,比如id什么的)。

2.将截图到的canvas标签通过toDataURL()方法转成可以传输的base64编码post给后台服务器处理。

3.在后台服务器对传递过来的base64编码处理得到图像并保存。

代码:

1.引用jquery插件

 <script src="/js/html2canvas.js" type="text/javascript"></script>

2.截图通过ajax传输

 <script type="text/javascript">
    function howuse(){
      html2canvas(document.getElementById('email_content'), {
        onrendered: function(canvas){
 6             var html_canvas = canvas.toDataURL();
7 $.post('/report/send_rep_submit', {html_canvas:html_canvas}, function(json){
8 }, 'json');
9 }
10 });
    }
  </script>

3.后台服务器处理

 public function send_rep_submit() {
$html_canvas = $this->input->post('html_canvas');
$image = base64_decode(substr($html_canvas, 22));
header('Content-Type: image/png');
$filename = "images/report/" . $id . ".png";
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}

html2canvas插件对整个网页或者网页某一部分截图并保存为图片的更多相关文章

  1. html2canvas根据DOM元素样式实现网页截图

    html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...

  2. html2canvas 把h5网页保存为图片 区域保存

    html2canvas 把h5网页保存为图片 想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...

  3. 基于html2canvas实现网页保存为图片及图片清晰度优化

    一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...

  4. Jquery 插件PrintArea 打印指定的网页区域

    Jquery 插件PrintArea 打印指定的网页区域 需要下载jquery 和printarea.js插件 PrintArea.Js插件,可以打印整个网页中某个指定的区域. $("打印区 ...

  5. 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

    最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...

  6. 火狐浏览器FireFox 如何将整个网页保存为图片

    使用Friefox的Pearl Cresent Page Saver插件 如图所示网页有很长的滚动条 点击右下角的该插件选项,将整个页面保存为图片 在桌面上得到了这样一个文件,大小是1263×6083 ...

  7. 使用jqPrint.js调用浏览器打印界面,打印网页中的某一部分该部分含有ECharts图表

    1.准备好js文件(我用的是谷歌浏览器) 这个文件是为了防止你的jQuery版本过高而不适配的问题 这是调用浏览器打印的js插件 2.引入js文件 <script src="js/jq ...

  8. 爬虫入门(三)——动态网页爬取:爬取pexel上的图片

    Pexel上有大量精美的图片,没事总想看看有什么好看的自己保存到电脑里可能会很有用 但是一个一个保存当然太麻烦了 所以不如我们写个爬虫吧(๑•̀ㅂ•́)و✧ 一开始学习爬虫的时候希望爬取pexel上的 ...

  9. 修改css的(屏蔽)overflow: hidden;实现浏览器能把网页全图保存成图片

    摘要: 1.项目需要,需要对网页内容“下载”保存成全图片 2.QQ浏览器等主流浏览器都支持这种下载保存功能 3.项目需要场景:编写好的项目维护文档,放在服务器上.如果是txt不能带图片可视化,如果wo ...

随机推荐

  1. {"读取 XML 数据时,超出最大名称表字符计数配额(16384)。。。。通过更改在创建 XML 读取器时所使用的 XmlDictionaryReaderQuotas 对象的 MaxNameTableCharCount 属性,。。

    这个问题倒腾了快一周,看了网上各种解决方案,还看了用谷歌翻译看了全英文的,参照了修改也没能够解决问题. 最后只有自己一行一行断点,一行一行删除代码,各种检测.主要是我在webservice里面新添加几 ...

  2. three.js 根据png生成heightmap

    Three.js: render real world terrain from heightmap using open data By jos.dirksen on Tue, 07/17/2012 ...

  3. [MOSEK] Stupid things when using mosek

    1.2016-8-14 我希望把一个qp问题的代码从conic constraints改为无外加约束,仅适用variable bounds的线性不等式约束 于是原来的约束代码为 if (r == MS ...

  4. flask-admin章节一:使用chartkick画报表

    一般中小型WEB整体来看逻辑比较简单些,一般都是基于数据库的增删改查.不过通过数据库查询到的记录直接展示给用户不是很直观,大家其实蛮期待有一个报表 直接展示他们期待的内容. 这块就涉及到数据的提取和展 ...

  5. android studio怎么分享项目到Git@OSC托管

    鄙人初次发表,如有不妥之处,敬请批评指正 1,安装git. git下载地址:http://git-scm.com/downloads/ 2,在AS 的File->Settings->Ver ...

  6. 有效提高win7电脑网速50倍

    有效提高win7电脑网速50倍 目前有多少人在使用Windows7?据统计微软已成功售出3.5亿份正版操作系统,加上市场上流传以Win7旗舰版为首的盗版Win7系统下载,Win7激活次数可能已经超过1 ...

  7. Surfer 软件做等值线图

    使用surfer软件做等值线图 Surfer软件美国Golden Software公司编制的一款以画三维图(等高线,image map,3d surface)的软件. Surfer具有的强大插值功能和 ...

  8. 【Mail】JavaMail介绍及发送邮件(一)

    JavaMail介绍 JavaMail是SUN提供给开发人员在应用程序中实现邮件发送和接收功能而提供的一套标准开发类库,支持常用的邮件协议,如SMTP.POP3.IMAP,开发人员使用JavaMail ...

  9. Spring 容器

    Spring提供了两个核心接口:BeanFactory和ApplicationContext,其中applicationContext是BeanFactory的子接口. 他们都可代表Spring容器, ...

  10. 从0到1搭建移动App功能自动化测试平台(2):操作iOS应用的控件

    转自:http://debugtalk.com/post/build-app-automated-test-platform-from-0-to-1-Appium-interrogate-iOS-UI ...