有时我们需要实现在浏览器端直接对整个或部分页面进行截屏，比如移动端常见的“长按网页保存为图片”功能。这个借助
html2canvas
这个第三方
js
库即可实现，下面通过样例演示其如何使用。
一、基本介绍
1，什么是 html2canvas
html2canvas
可以通过获取
HTML
的某个元素，然后生成
Canvas
，从而让用户保存为图片。
html2canvas
工作原理是将当页面渲染成一个
Canvas
图片，通过读取
DOM
并将不同的样式应用到这些元素上。
html2canvas
不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。
</head>
<body style="margin:0px">
<div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
<h4 style="color: #000; ">欢迎访问 hangge.com</h4>
<button type="button" name="button" onclick="convert()">开始生成</button>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
//开始转换
function convert() {
html2canvas(document.body).then(canvas => {
document.body.appendChild(canvas)
</script>
</body>
</html>
2，将指定 DOM 元素转成 Canvas
下面样例只将按钮上方的
div
渲染成
Canvas
。
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
3，将 Canvas 转换成 base64 形式
（1）上面样例生成 canvas 后，便直接显示在页面上进行预览。我们也可以将生成的 canvas 转成 base64 形式用于提交到后台，或者作为 <image> 元素的 src 属性来显示。
html2canvas(document.querySelector("#capture")).then(canvas => {
var imgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
console.log("base64编码数据：", imgUrl);
（2）转换时可以设置截图质量（0~1）
html2canvas(document.querySelector("#capture")).then(canvas => {
var imgUrl = canvas.toDataURL("image/png", 1); // 此方法可以设置截图质量（0-1）
console.log("base64编码数据：", imgUrl);
三、进阶用法
1，设置生成的 Canvas 的高度和宽度
html2canvas 在使用时还有许多可选的配置参数，下面样例生成一个 75*75 的 canvas。
html2canvas(document.querySelector("#capture"),{
width: 75,
height: 75
}).then(canvas => {
document.body.appendChild(canvas)
2，设置 Canvas 的背景色
（1）使用 backgroundColor 这个属性可以设置 canvas 的背景色：
默认值为白色（#ffffff）
如果想要背景透明，可以将其设为 null
3，设置放大倍数
（1）使用 scale 属性可以修改渲染时的放大倍数（默认为 1），将其调大可以解决低分辨率设备下生成的图片模糊问题。
（2）下面是当 scale 设置为2时，生成的图片。
html2canvas(document.querySelector("#capture"),{
scale: 2
}).then(canvas => {
document.body.appendChild(canvas)
4，指定渲染的 Canvas
如果页面上原先就有个
canvas 元素，我们希望可以将图片绘制在它上面，可以使用
canvas 属性设置。
<!DOCTYPE html>
<meta charset="utf-8">
<title>hangge.com</title>
</head>
<body style="margin:0px">
<div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
<h4 style="color: #000; ">欢迎访问 hangge.com</h4>
<button type="button" name="button" onclick="convert()">开始生成</button>
<canvas id="myCanvas" width="220" height="84"></canvas>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
//开始转换
function convert() {
html2canvas(document.querySelector("#capture"),{
canvas: document.querySelector("#myCanvas")
}).then(canvas => {
</script>
</body>
</html>
附：自动保存为图片并下载（1）上面样例如果要将 DOM 元素变为图片保存下来，都是先将其转成 canvas，然后再手动在 canvas 上点击右键，通过“另存为”功能下载到本地。
（2）如果想要实现图片自动生成、自动下载的话可以借助 FileSaver.js 这个第三方库。其具体安装配置可以参考我之前的写的文章：
JS - 使用 FileSaver.js 实现浏览器文件导出
</head>
<body style="margin:0px">
<div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
<h4 style="color: #000; ">欢迎访问 hangge.com</h4>
<button type="button" name="button" onclick="convert()">开始生成</button>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript">
//开始转换
function convert() {
html2canvas(document.querySelector("#capture")).then(canvas => {
//将canvas内容保存为文件并下载
canvas.toBlob(function(blob) {
saveAs(blob, "hangge.png");
</script>
</body>
</html>
ewebeditor在ie9下报调用的对象无效错误layer - 简单好用的Web弹出层组件使用详解3（输入框、图片查看）StartEncrypt - 一键部署启用HTTPS服务（使用免费证书）JS - 使用正则表达式获取字符串里的部分内容（截取两个字符串之间内容）InfluxDB时序数据库的安装使用教程1（基本介绍）TIOBE - 2017年8月编程语言排行榜jQuery - 右键菜单插件contextMenu使用详解1（安装配置、基本用法）TIOBE - 2023年12月编程语言排行Cockpit - 基于Web的Linux管理工具的安装和使用教程（CentOS为例）CentOS下自动申请、部署Let's Encrypt免费SSL证书教程（Nginx服务器）
