前端html2canvas使用场景详解

优质文章学习记录

— 10 min read

html2canvas 是前端常用的 “DOM 转图片” 库，核心是将页面 DOM 节点渲染为 Canvas，再转为图片（Base64 或 Blob）。以下是 9 种核心使用场景的详细教程，包含代码示例、参数配置、问题解决，覆盖日常开发需求。

一、基础使用：将指定 DOM 转为 Base64 图片

适用于简单场景（如生成证书、截图分享），无需复杂配置。

1. 安装与引入

# npm 安装 npm install html2canvas --save

javascript

// 模块化项目引入（Vue/React/Angular） import html2canvas from 'html2canvas'; // 非模块化项目（直接引入 CDN） <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>

2. 核心代码

html

<!-- 目标 DOM：需要转为图片的容器 --> <div> <h2>基础截图示例</h2> <p>这是要转为图片的内容</p> </div> <!-- 图片预览容器 --> <img />

javascript

// 触发截图（如点击按钮后） document.querySelector('#btn').addEventListener('click', async () => { // 1. 获取目标 DOM const targetDom = document.getElementById('targetDom'); // 2. 调用 html2canvas 生成 Canvas const canvas = await html2canvas(targetDom, { scale: 2, // 2倍缩放，避免图片模糊（关键参数） useCORS: true, // 允许跨域图片（如网络图片） logging: false, // 关闭控制台日志 backgroundColor: null // 保留 DOM 原有背景（默认白色） }); // 3. Canvas 转为 Base64 图片（支持 jpeg/png） const base64Img = canvas.toDataURL('image/jpeg', 1.0); // 1.0 表示质量（0-1） // 4. 预览图片 document.getElementById('previewImg').src = base64Img; // 5. （可选）下载图片 const link = document.createElement('a'); link.href = base64Img; link.download = '基础截图.jpg'; link.click(); });

二、进阶场景：处理跨域图片

当 DOM 中包含网络图片（如 https://xxx.com/xxx.jpg），易出现 “图片空白” 问题，需配置跨域参数。

关键配置

  1. 前端配置：useCORS: true + allowTaint: true（允许跨域图片污染 Canvas）；
  2. 后端配置：图片服务器需返回 Access-Control-Allow-Origin: *（或当前域名），否则跨域图片仍会空白。

完整代码

javascript

const canvas = await html2canvas(targetDom, { scale: 2, useCORS: true, // 允许加载跨域图片 allowTaint: true, // 允许 Canvas 被跨域图片污染（否则图片会被过滤） logging: false, // （可选）处理跨域图片加载失败的情况 onclone: (clonedDoc) => { // clonedDoc 是 DOM 克隆体，可在此修改图片地址 const imgs = clonedDoc.querySelectorAll('img'); imgs.forEach(img => { // 替换图片为同源地址（若后端未配置 CORS 时的备选方案） if (img.src.includes('跨域域名')) { img.src = img.src.replace('跨域域名', '同源代理域名'); } }); } });

三、复杂场景：固定宽高 + 滚动内容截图

适用于 “长列表截图”（如表格、聊天记录），需固定截图宽高，同时包含滚动区域的所有内容。

核心思路

  1. 先保存目标 DOM 的原始样式（overflow/height）；
  2. 临时修改为 overflow: visible + 自适应高度（确保所有内容展开）；
  3. 截图完成后恢复原始样式。

完整代码

javascript

async function captureScrollContent() { const targetDom = document.getElementById('targetDom'); // 1. 保存原始样式 const originalStyle = { overflow: targetDom.style.overflow, height: targetDom.style.height }; try { // 2. 临时修改样式：展开所有滚动内容 targetDom.style.overflow = 'visible'; targetDom.style.height = 'auto'; // 自适应高度，显示所有内容 // 3. 截图（固定宽高，避免内容变形） const canvas = await html2canvas(targetDom, { scale: 2, useCORS: true, logging: false, windowWidth: targetDom.offsetWidth, // 固定截图宽度 windowHeight: targetDom.offsetHeight // 固定截图高度（此时已包含所有内容） }); // 4. 转为图片并下载 const base64Img = canvas.toDataURL('image/png', 1.0); const link = document.createElement('a'); link.href = base64Img; link.download = '长列表截图.png'; link.click(); } finally { // 5. 恢复原始样式（无论成功失败都要恢复） targetDom.style.overflow = originalStyle.overflow; targetDom.style.height = originalStyle.height; } } // 调用 captureScrollContent();

四、Vue 项目：组件内 DOM 截图（含响应式数据）

Vue 中需注意 “DOM 渲染时机”—— 确保数据更新后（如接口请求完成）再截图，避免内容空白。

核心注意点

  1. 用 this.$nextTick() 确保 DOM 已更新；
  2. 若用 v-for 渲染列表，需等待列表渲染完成后再截图。

完整代码（Vue 3 示例）

vue

<template> <div> <!-- 目标 DOM：包含响应式数据 --> <div ref="certDom"> <h2>{{ userName }} 的证书</h2> <p>项目：{{ projectName }}</p> <p>时间：{{ date }}</p> </div> <button @click="generateCert">生成证书</button> <img :src="previewImg" alt="证书预览" /> </div> </template> <script setup> import { ref, nextTick } from 'vue'; import html2canvas from 'html2canvas'; // 响应式数据 const userName = ref(''); const projectName = ref(''); const date = ref('2025-01-01'); const previewImg = ref(''); const certDom = ref(null); // 目标 DOM 引用 // 接口请求：获取用户数据 const fetchUserInfo = async () => { const res = await fetch('/api/user'); const data = await res.json(); userName.value = data.userName; projectName.value = data.projectName; }; // 生成证书（截图） const generateCert = async () => { // 1. 先获取数据，确保 DOM 已更新 await fetchUserInfo(); // 2. 等待 Vue DOM 渲染完成 await nextTick(); // 3. 截图（certDom.value 是目标 DOM） const canvas = await html2canvas(certDom.value, { scale: 2, useCORS: true, backgroundColor: '#fff' }); // 4. 预览并下载 previewImg.value = canvas.toDataURL('image/jpeg', 1.0); const link = document.createElement('a'); link.href = previewImg.value; link.download = `${userName.value}的证书.jpg`; link.click(); }; </script> <style scoped> .cert-container { width: 500px; height: 700px; background: url('@/assets/cert-bg.jpg') no-repeat center; background-size: 100% 100%; padding: 50px; box-sizing: border-box; } </style>

五、React 项目：函数组件截图（含 Hooks）

React 中需用 useRef 获取 DOM 节点，用 useEffect 处理异步渲染时机。

完整代码（React 18 示例）

jsx

import { useRef, useState } from 'react'; import html2canvas from 'html2canvas'; const ScreenshotComponent = () => { // 1. 获取目标 DOM 引用 const targetRef = useRef(null); // 2. 预览图片状态 const [previewImg, setPreviewImg] = useState(''); // 截图函数 const captureDom = async () => { if (!targetRef.current) return; // 3. 调用 html2canvas const canvas = await html2canvas(targetRef.current, { scale: 2, useCORS: true, logging: false }); // 4. 转为图片 const base64 = canvas.toDataURL('image/png', 1.0); setPreviewImg(base64); // 5. 下载图片 const link = document.createElement('a'); link.href = base64; link.download = 'react截图.png'; link.click(); }; return ( <div style={{ padding: 20 }}> {/* 目标 DOM：用 ref 绑定 */} <div ref={targetRef} style={{ width: 400, height: 300, background: '#e8f4f8', padding: 20 }} > <h3>React 截图示例</h3> <p>当前时间：{new Date().toLocaleString()}</p> </div> <button onClick={captureDom} style={{ margin: 20 }}>生成截图</button> {previewImg && <img src={previewImg} alt="预览" style={{ maxWidth: '100%' }} />} </div> ); }; export default ScreenshotComponent;

六、特殊场景：隐藏 DOM 截图（不显示在页面）

适用于 “后台生成图片”（如生成后直接下载，无需在页面显示 DOM），需临时将 DOM 渲染到页面外。

核心思路

  1. 目标 DOM 初始样式设为 position: absolute; left: -9999px; top: -9999px;（隐藏在视口外）；
  2. 截图完成后可删除该 DOM（可选）。

完整代码

html

<!-- 隐藏的目标 DOM：在视口外渲染 --> <div> <h2>隐藏 DOM 生成的图片</h2> <p>用户：张三</p> <p>等级：VIP</p> </div> <button>生成隐藏图片</button>

javascript

document.getElementById('generateBtn').addEventListener('click', async () => { const hiddenDom = document.getElementById('hiddenDom'); // 截图（与正常 DOM 一致） const canvas = await html2canvas(hiddenDom, { scale: 2, useCORS: true, logging: false }); // 下载图片 const base64 = canvas.toDataURL('image/jpeg', 1.0); const link = document.createElement('a'); link.href = base64; link.download = '隐藏DOM图片.jpg'; link.click(); // （可选）截图后删除隐藏 DOM // hiddenDom.remove(); });

七、性能优化：批量截图 + 避免重复渲染

当需要批量生成图片（如多条数据生成证书），需控制截图顺序，避免同时渲染导致浏览器卡顿。

核心思路

  1. 用 async/await 按顺序截图（一条完成后再截下一条）；
  2. 截图前判断是否已生成，避免重复操作。

完整代码

javascript

// 批量数据（如多条证书信息） const certList = [ { id: 1, userName: '张三', project: '前端开发' }, { id: 2, userName: '李四', project: '后端开发' }, { id: 3, userName: '王五', project: 'UI设计' } ]; // 批量截图函数 async function batchCapture() { for (const cert of certList) { // 1. 动态创建目标 DOM（每条数据一个 DOM） const tempDom = document.createElement('div'); tempDom.style.width = '500px'; tempDom.style.height = '700px'; tempDom.style.background = '#fff'; tempDom.style.padding = '50px'; tempDom.style.position = 'absolute'; tempDom.style.left = '-9999px'; // 隐藏在视口外 tempDom.innerHTML = ` <h2>${cert.userName} 的证书</h2> <p>项目：${cert.project}</p> <p>日期：2025-01-01</p> `; document.body.appendChild(tempDom); try { // 2. 截图（按顺序执行） const canvas = await html2canvas(tempDom, { scale: 2, useCORS: true, logging: false }); // 3. 下载图片 const base64 = canvas.toDataURL('image/jpeg', 1.0); const link = document.createElement('a'); link.href = base64; link.download = `${cert.userName}的证书.jpg`; link.click(); } finally { // 4. 移除临时 DOM（避免内存占用） document.body.removeChild(tempDom); // （可选）延迟 500ms，避免浏览器卡顿 await new Promise(resolve => setTimeout(resolve, 500)); } } } // 调用批量截图 batchCapture();

八、问题解决：常见报错与优化方案

1. 图片模糊

  • 原因：Canvas 默认缩放为 1，屏幕 DPI 过高（如 Retina 屏）导致模糊；
  • 解决：设置 scale: 2 或 scale: window.devicePixelRatio（自适应屏幕 DPI）。

javascript

const canvas = await html2canvas(targetDom, { scale: window.devicePixelRatio, // 自适应屏幕缩放 useCORS: true });

2. 跨域图片空白

  • 原因：图片服务器未配置 CORS，或未开启 useCORS: true；
  • 解决：
    1. 后端添加 Access-Control-Allow-Origin 响应头；
    2. 前端配置 useCORS: true + allowTaint: true；
    3. 备选方案：用同源代理服务器转发图片（如 Nginx 代理）。

3. DOM 内容未完全渲染（如接口数据空白）

  • 原因：截图时机过早，DOM 尚未更新（如接口请求未完成）；
  • 解决：
    • Vue：用 this.$nextTick() 等待 DOM 渲染；
    • React：用 useEffect 或 await 等待数据加载；
    • 原生 JS：在接口 then 回调中执行截图。

4. 大 DOM 截图卡顿

  • 原因：DOM 节点过多（如长列表、复杂表格），渲染耗时；
  • 解决：
    1. 简化 DOM（移除截图无关的节点，如隐藏按钮、多余注释）；
    2. 分批截图（避免一次性渲染大量节点）；
    3. 关闭日志：logging: false（减少控制台输出耗时）。

九、高级场景：Canvas 转 Blob 上传服务器

当需要将生成的图片上传到后端（而非本地下载），需将 Canvas 转为 Blob 格式（比 Base64 更节省带宽）。

完整代码

javascript

async function captureAndUpload() { const targetDom = document.getElementById('targetDom'); const canvas = await html2canvas(targetDom, { scale: 2, useCORS: true, logging: false }); // 1. Canvas 转为 Blob（支持指定格式和质量） canvas.toBlob(async (blob) => { // 2. 构建 FormData（用于上传） const formData = new FormData(); formData.append('image', blob, '上传图片.jpg'); // 第三个参数是文件名 formData.append('userId', '123'); // 其他参数（如用户ID） // 3. 上传到服务器 try { const res = await fetch('/api/upload-image', { method: 'POST', body: formData, // 注意：FormData 上传无需设置 Content-Type，浏览器会自动处理 }); const data = await res.json(); if (data.success) { alert('图片上传成功！'); console.log('图片地址：', data.imageUrl); } } catch (err) { console.error('上传失败：', err); } }, 'image/jpeg', 0.8); // 0.8 表示图片质量（0-1，值越高质量越好） } // 调用 captureAndUpload();

Read more

深入解析VR与AR：从技术原理到未来图景

引言 虚拟现实（VR）和增强现实（AR）正逐步从科幻概念演变为改变我们工作、娱乐和社交方式的核心技术。它们通过数字内容与现实世界的融合，重塑了人机交互的边界。本文将系统分析两者的定义、技术架构、应用场景、当前挑战及未来趋势，帮助您全面理解这一变革性领域。 一、核心定义与区别 维度虚拟现实 (VR)增强现实 (AR)混合现实 (MR)概念完全由计算机生成的虚拟环境，用户沉浸其中，与物理世界隔绝将数字信息叠加到真实世界之上，用户同时看到虚实内容数字对象与真实世界实时交互，并相互影响（AR的进阶）沉浸感完全沉浸（封闭式）部分沉浸（透视式）虚实融合，具有空间锚定和物理交互典型设备Oculus Quest, HTC Vive, PlayStation VRMicrosoft HoloLens, Google Glass, 手机AR（ARKit/ARCore）Microsoft HoloLens 2, Magic Leap核心技术头显显示、
OpenClaw机器人引爆天网，首次拥有记忆，逆天了！

OpenClaw机器人引爆天网，首次拥有记忆，逆天了！

手把手教你一键部署OpenClaw，连接微信、QQ、飞书、钉钉等，1分钟全搞定！ OpenClaw这款开源机器人最近彻底火了，它让机器人第一次有了“记性”。这种原本只在科幻片里出现的“天网”级技术，居然直接在GitHub上公开了源代码。 就在刚刚，全球搞开源机器人的圈子被推特上的一条动态给点燃了！ 手把手教你一键部署OpenClaw，连接微信、QQ、飞书、钉钉等，1分钟全搞定！ 视频里，一台装了OpenClaw系统的宇树人形机器人在屋里四处走动。它全身上下都是传感器——激光雷达、双目视觉外加RGB相机，这些设备捕捉到的海量数据都被喂进了一个大脑里。 紧接着，奇迹发生了：这台宇树机器人竟然开始理解空间和时间了！这种事儿在以前的机器人身上压根没出现过。 手把手教你一键部署OpenClaw，连接微信、QQ、飞书、钉钉等，1分钟全搞定！ 它不仅分得清房间、人和东西都在哪儿，甚至还记得在什么时间点发生了什么事。 开发团队给这种神技起名叫“空间智能体记忆”。简单来说，就是机器人从此以后也有了关于世界的“长期记忆”！ 而把这种科幻照进现实的，正是最近在国际上大红大紫的开源项目OpenClaw。

人脸识别核心算法深度解析：FaceNet与ArcFace从原理到实战

本文深入剖析人脸识别领域两大里程碑算法——Google的FaceNet和InsightFace的ArcFace，从数学原理、损失函数设计到完整PyTorch实现，帮你彻底理解现代人脸识别技术的核心。 一、引言：人脸识别的本质问题 1.1 人脸识别 ≠ 图像分类 初学者常有的误解：把人脸识别当作分类问题。 ❌ 错误思路：分类方法 输入人脸 → CNN → Softmax → 输出"这是第1532号人" 问题： 1. 类别数巨大（十亿级身份） 2. 无法处理新注册的人（需要重新训练） 3. 每个人样本极少（很难训练好分类器） ✅ 正确思路：度量学习方法 输入人脸 → CNN → 特征向量(embedding) → 与数据库比对 优势： 1. 只需学习"什么是相似"，不需要预定义类别 2. 新人注册只需提取特征，无需重新训练
基于无人机遥感的植被覆盖度测量实践与经验分享

基于无人机遥感的植被覆盖度测量实践与经验分享

分享基于无人机遥感的植被覆盖度测量实验经验，主要任务是利用大疆Mavic 3无人机进行植被覆盖度地面测量，包含样方设计、航线规划、现场拍摄以及借助AI算法计算覆盖度。 一、实验概况与目的 实验测量的植被覆盖度（Fractional Vegetation Cover, FVC）定义为植被地上部分垂直投影面积占统计区总面积的百分比，是反映生态环境状态的重要参量，传统地面测量耗时耗力，而无人机遥感凭借其高机动性和高分辨率成为主流手段。本次实验的主要目的是： * 掌握无人机遥感监测的标准化操作流程 * 学习植被覆盖度地面测量的技术方法 * 熟悉使用AI（DeepSeek算法）完成植被覆盖度计算 * 总结无人机监测中的常见问题及解决方案二、技术方法与工作流程 二、技术方法与工作流程 2.1 植被覆盖度地面测量技术简介 植被覆盖度指单位面积内植被冠层（叶、茎、枝）垂直投影面积所占的比例。目前最常用的地面测量方法是照相法——利用数码相机或无人机拍摄样方照片，然后通过图像识别计算植被像素占比。本次实验采用无人机垂直向下拍摄小样方（1m×1m），再通过算法批量计算覆盖度。 2.