js实现网页截图的两种方案详析
作者：树上的
在Web开发中,实现网页截图功能可以帮助我们保存网页内容、生成海报、制作截图分享等,这篇文章主要介绍了js实现网页截图的两种方案,需要的朋友可以参考下
方案一：使用 html2canvas 库（推荐）
原理：将 HTML DOM 元素转换为 Canvas，再导出为图片
特点：兼容性好，支持大部分现代浏览器，但需注意 CSS 属性兼容性
实现步骤：
1.安装依赖：
npm install html2canvas
2.基础截图代码：
import html2canvas from "html2canvas"
//截取整个屏幕
const screenFn = () => {
const element = document.body
html2canvas(element).then((canvas) => {
const imgUrl = canvas.toDataURL("image/png")
const link = document.createElement("a")
link.download = "screenshot.png"
link.href = imgUrl
link.click()
})
}
//截取特定元素
const screenFn = () => {
const element = document.getElementById("version")
if (element) {
html2canvas(element, {
allowTaint: true, // 允许跨域图片
useCORS: true, // 使用 CORS 加载图片
scale: 2, // 提升截图分辨率
logging: true, // 调试时查看日志
scrollY: -window.scrollY // 处理滚动位置
}).then((canvas) => {
const imgUrl = canvas.toDataURL("image/png")
const link = document.createElement("a")
link.download = "screenshot.png"
link.href = imgUrl
link.click()
})
}
}方案二： 使用原生 API Window: getDisplayMedia()
原理：通过屏幕共享 API 捕获当前标签页
特点：需用户授权，适合需要交互式操作的场景
实现步骤：
const screenFn = async () => {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: { displaySurface: "browser" }
})
const videoTrack = stream.getVideoTracks()[0]
const imageCapture = new ImageCapture(videoTrack)
const bitmap = await imageCapture.grabFrame()
// 将 bitmap 绘制到 canvas
const canvas = document.createElement("canvas")
canvas.width = bitmap.width
canvas.height = bitmap.height
const ctx = canvas.getContext("2d")
ctx.drawImage(bitmap, 0, 0)
// 导出图片
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = "screenshot.png"
a.click()
}, "image/png")
videoTrack.stop()
} catch (err) {
console.error("截图失败:", err)
}
}两种方案优缺点：
1.方案一：html2canvas
优点：纯前端实现，灵活度高
缺点：复杂页面渲染可能有差异
2.方案二：getDisplayMedia
优点：原生 API，无需额外依赖
缺点：需要用户手动选择分享区域
总结
到此这篇关于js实现网页截图的文章就介绍到这了,更多相关js网页截图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！