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. 16.10.17学到的Java知识

    1. 例:3-2.6==0.4的值是什么?可能乍一看,感觉是返回TRUE,因为3-2.6=0.4,0.4==0.4:所以返回TRUE. 然而,上面分析在JAVA中是错的. 由于浮点数的运算在JAVA中 ...

  2. ASP.NET    实现301状态重定向 实现搜索引擎友好

    4.0提供301转向 RedirectPermanent 使用该函数转向http状态码为301 备注     RedirectPermanent(String) 方法重载提供了一个 301 的 HTT ...

  3. Android安全开发之WebView中的地雷

    Android安全开发之WebView中的地雷 0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者 ...

  4. 如何去掉div滚动条

    1.去掉横向滚动条 style="overflow-x:hidden" 2.去掉纵向滚动条 style="overflow-y:hidden" 3.同时去掉横向 ...

  5. 国际化,java.util.ResourceBundle使用详解

    java.util.ResourceBundle使用详解   一.认识国际化资源文件   这个类提供软件国际化的捷径.通过此类,可以使您所编写的程序可以:          轻松地本地化或翻译成不同的 ...

  6. MySQL中GROUP_CONCAT中排序

    SELECT concat('',group_concat(option_name  )) as option_name,select_id            FROM zuyi_t_search ...

  7. react 15来了

    有段时间没做react的项目了,前两天才发现react搞了一个不太小的动作,不是遵循原来的小版本号迭代,从0.14.x继续更新,而是直接跳到了15.0.X.虽然业界一直有这个观点,0.x的版本视为非稳 ...

  8. IPv4头部结构

    2.2 IPv4头部结构 2.2.1 IPv4头部结构 IPv4的头部结构如图2-1所示.其长度通常为20字节,除非含有可变长的选项部分. 4位版本号(version)指定IP协议的版本.对IPv4来 ...

  9. mysql 查询每个班级成绩前两名

  10. HTTP1.1初识

    Http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议. Http1.1版中,有一个持续连接(Persistent Connections)机制,其作为Http1.1中建立连接的 ...