有时我们需要实现在浏览器端直接对整个或部分页面进行截屏，比如移动端常见的“长按网页保存为图片”功能。这个借助 html2canvas 这个第三方 js 库即可实现，下面通过样例演示其如何使用。
一、基本介绍
1，什么是 html2canvas
html2canvas 可以通过获取 HTML 的某个元素，然后生成 Canvas，从而让用户保存为图片。
html2canvas 工作原理是将当页面渲染成一个 Canvas 图片，通过读取 DOM 并将不同的样式应用到这些元素上。
html2canvas 不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。
2，注意事项
当然并不是所有的页面元素都可以进行转换的，下面是不支持的情况：
不支持 iframe
不支持跨域图片（可以先将线上图片转换成 base64，然后用 base64 作为图片路径）
不支持 flash
不支持 transform、transition 过渡、animation 动画（备注：transform 初始布局是可以的，但是不能参与动画类的操作）
3，安装配置
（1）首先到官网将 html2canvas.js 下载到本地。
官网地址：http://html2canvas.hertzen.com/
（2）然后在页面中将其引用即可。
<script type="text/javascript" src="js/html2canvas.js"></script>
二、基本用法
1，将整个页面转成 Canvas
（1）效果图
点击“开始生成”按钮后，会将整个页面渲染成一个 canvas，并将这个 canvas 添加到页面尾部。
右键点击生成的 canvas，可以将其作为图片保存到本地。
原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）
（2）样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
</head>
<body style="margin:0px">
<div id="capture
最低0.47元/天 解锁文章
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
