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 ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jquery if条件语句的写法
May 19 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 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 无限级 SelectTree 类
2009/05/19 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
解析php5配置使用pdo
2013/07/03 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
js中prototype用法详细介绍
2013/11/14 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue项目创建步骤及路由router
2020/01/14 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
驾驶员安全责任书
2014/07/22 职场文书
会员活动策划方案
2014/08/19 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
爱心捐书倡议书
2015/04/27 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python