将 div 内容保存为图片
约 691 字大约 2 分钟
2026-05-06
将网页中某个特定 div 的内容保存为图片,是前端常见的需求(如生成海报、截图分享等)。目前最主流且稳妥的方案是借助第三方库将 DOM 渲染到 Canvas,再导出为图片。 下面是一些实现方案。
html2canvas
html2canvas 简单易用,支持大部分样式,能够满足大多数保存为图片的需求。
依赖引入:
npm install html2canvas或通过 CDN 引入:
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>基础用法:
将指定 div 渲染到 Canvas,通过 a 标签的 download 属性触发图片下载:
import html2canvas from 'html2canvas';
async function downloadDivAsImage(divElement, fileName = 'download.png') {
try {
const canvas = await html2canvas(divElement, {
// 可选配置
scale: 2, // 提高清晰度,默认1
backgroundColor: null,
useCORS: true, // 允许加载跨域图片
allowTaint: false, // 不允许画布被污染
logging: false,
});
// 将 canvas 转为 Blob 并下载
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}, 'image/png');
} catch (error) {
console.error('生成图片失败:', error);
}
}示例:
html2canvas示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html2canvas 下载图片</title>
<!-- 1. 引入 html2canvas -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
/* 需要保存为图片的卡片 */
#capture {
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 32px 28px;
width: 100%;
max-width: 380px;
box-shadow: 0 12px 36px rgba(0,0,0,0.08);
text-align: center;
margin-bottom: 28px;
}
#capture h2 {
margin: 0 0 10px;
font-size: 1.6rem;
color: #1e293b;
}
#capture p {
color: #475569;
font-size: 0.95rem;
margin: 0 0 16px;
}
#capture .tag {
display: inline-block;
background: #eef2ff;
color: #4f46e5;
font-weight: 600;
padding: 6px 18px;
border-radius: 30px;
font-size: 0.85rem;
letter-spacing: 0.3px;
}
#capture .footer-text {
margin-top: 16px;
font-size: 0.75rem;
color: #94a3b8;
}
/* 下载按钮 */
.btn-download {
background: #4f46e5;
color: white;
border: none;
padding: 13px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 6px 18px rgba(79,70,229,0.3);
letter-spacing: 0.3px;
}
.btn-download:hover {
background: #4338ca;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(79,70,229,0.4);
}
.btn-download:active {
transform: scale(0.96);
}
</style>
</head>
<body>
<div id="capture">
<h2>分享卡片</h2>
<p>这是一段简短的描述文字,展示卡片保存为图片的效果。</p>
<span class="tag">html2canvas</span>
</div>
<!-- 下载按钮 -->
<button class="btn-download" onclick="downloadImage()">
保存为图片
</button>
<script>
async function downloadImage() {
const element = document.getElementById('capture');
const btn = document.querySelector('.btn-download');
// 按钮置灰,防止重复点击
btn.disabled = true;
btn.textContent = '保存中...';
try {
// 2. 将元素渲染到 Canvas
const canvas = await html2canvas(element, {
scale:2, // 2倍清晰度
backgroundColor:null,
useCORS: true, // 如需加载外部图片保留
allowTaint: false,
logging: false
});
// 3. Canvas → Blob → 触发下载
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `卡片_${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url); // 释放内存
}, 'image/png');
} catch (error) {
console.error('生成失败:', error);
alert('图片生成失败,请检查控制台');
} finally {
// 恢复按钮
btn.disabled = false;
btn.textContent = '保存为图片';
}
}
</script>
</body>
</html>