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 相关文章推荐
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
实例解析Array和String方法
Dec 14 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
vue实现短信验证码输入框
Apr 17 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
python获取元素在数组中索引号的方法
2015/07/15 Python
python在不同层级目录import模块的方法
2016/01/31 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
晚宴邀请函范文
2014/01/15 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
技术比武方案
2014/05/19 职场文书
抗震救灾标语
2014/06/26 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL