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. eclipse中的代码提示功能

    Eclipse 的代码提示功能,具体配置 1. 打开Eclipse ,然后"window"→"Preferences" 2. 选择"java" ...

  2. 我的Git使用-资料查询,名博笔记

    1.首先您要知道什么是GIT 2.然后对其GIT的历史有所了解(吹牛b的时候用得着,如果还不知道 linux 脱袜子 Linus Torvalds  o(︶︿︶)o ) Git 常用资料查询站点. 官 ...

  3. MYSQL常用内置函数详解说明

    函数中可以将字段名当作变量来用,变量的值就是该列对应的所有值:在整理98在线字典数据时(http://zidian.98zw.com/),有这要一个需求,想从多音字duoyinzi字段值提取第一个拼音 ...

  4. 设计模式:Context模式

    作者:吴香伟 发表于 2014/09/12 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 Ceph实现中使用了大量派生于Context抽象类的子类,用法简单却很 ...

  5. Chrome 插件集推荐

    在前端这个行业里面,浏览器担任着及其重要的角色.今天我们可以选择的浏览器有很多,Chrome,Firefox,IE,Safari… 为了能获得更佳的开发体验,大家更多地选择 Chrome.今天介绍下我 ...

  6. IosPush推送通知的实现

    1. Apple推送通知的机制 上图可以分为三个阶段: 第一阶段:应用程序把要发送的消息.目的iPhone的标识打包,发给APNS. 第二阶段:APNS在自身的已注册Push服务的iPhone列表中, ...

  7. DbProviderFactory .net数据库工厂模式

    http://kb.cnblogs.com/page/72789/  工厂模式 http://www.cnblogs.com/Ruiky/archive/2012/04/19/2456784.html ...

  8. 在安卓下打包cocos2d-js 3.6项目with ProtoBuf.js

    项目用到了cocos2d-js 3.6和ProtoBuf.js,但是打包成apk时运行时总是报错(evaluatedOK == JS_FALSE),没有具体的文件和行号报错信息. 只能一个一个文件排查 ...

  9. LoopBackJS 之 文件上传下载——使用loopback-component-storage

    参考链接: http://loopback.io/doc/en/lb2/Storage-component.html#creating-a-storage-component-data-source ...

  10. 实现十进制无符号整数m到十六进制数的转换功能

    /*利用顺序栈结构,编写算法函数void Dto16(unsigned int m)实现十进制无符号整数m到十六进制数的转换功能.*//******************************** ...