Javascript保存网页为图片借助于html2canvas库实现


Posted in Javascript onSeptember 05, 2014

第一步,把网页保存为Canvas画布,借助于html2canvas库,http://html2canvas.hertzen.com/

html2canvas(document.getElementById("id1"), { 
onrendered: function(canvas) { 
document.getElementById("id2").appendChild(canvas);//生成画布后如何处理,当然可以在新标签打开,在浮层展示等等 
}, 
canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id 
});

Note:html2canvas()第一个参数为要生成canvas的区域,如果整个网页生成canvas,则是document.body。第二个参数详见官网设置canvas的各种属性,当然修改源代码可以添加自己想要的属性,如给canvas添加id等。

第二步,把第一步中生成的canvas保存成图片

var canvas = document.getElementById("<span style="font-family: Arial, Helvetica, sans-serif;">canvas"</span><span style="font-family: Arial, Helvetica, sans-serif;">),</span> 
url = canvas.toDataURL();// 
//以下代码为下载此图片功能 
var triggerDownload = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body"); 
triggerDownload[0].click(); 
triggerDownload.remove();

这里关注toDataURL()方法即可,可以把canvas转化成data形式的图片url,把这个url赋给<img/>标签即可显示图片,代码中其他部分为自己需要的下载功能。

Javascript 相关文章推荐
JavaScript 继承详解 第一篇
Aug 30 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 #Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 #Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 #Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 #Javascript
window.location的重写及判断location是否被重写
Sep 04 #Javascript
js怎么覆盖原有方法实现重写
Sep 04 #Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 #Javascript
You might like
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php简单判断文本编码的方法
2015/07/30 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
微信网页登录逻辑与实现方法
2019/04/29 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
解决Python requests 报错方法集锦
2017/03/19 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python连接Redis的基本配置方法
2018/09/13 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
活动主持人开场白
2015/05/28 职场文书
致青春观后感
2015/06/09 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
保险公司增员口号
2015/12/25 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB