使用原生js对网页进行截图，直接上代码
1、目录结构
index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/lib/font-awesome/6.2.0/css/all.min.css">
<title>screenshot</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>习近平会见基辛格 我们不忘老朋友</h1>
<p>习近平指出，基辛格博士刚刚度过百岁生日，你访问中国已经一百多次。这两个“一百”加在一起，使你这次访华具有特殊意义。52年前，中美两国处在一个关键转折点，毛泽东主席、周恩来总理同尼克松总统和你本人以卓越的战略眼光，作出中美合作的正确抉择，开启了中美关系正常化进程，既造福了两国，也改变了世界。中国人重情讲义，我们不会忘记老朋友，不会忘记你为推动中美关系发展、增进中
</p>
<h2>席先生，我很荣幸能够访问</h2>
<p>席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问</p>
<button id="src-btn">截图保存</button>
<div class="src-preview">
<div class="screenshot">
<i id="close-btn" class="fa-solid fa-xmark"></i>
<img src="" alt="screenshot">
</div>
</div>
</body>
</html>
script.js
const screenshotBtn = document.querySelector("#src-btn");
screenshotPreview = document.querySelector(".src-preview");
closeBtn = screenshotPreview.querySelector("#close-btn");
captureScreen=async ()=>{
try {
const stream=await navigator.mediaDevices.getDisplayMedia({perferCurrentTab:true});
const video=document.createElement("video");
video.addEventListener("loadedmetadata",()=>{
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
video.play();
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
stream.getVideoTracks()[0].stop();
//document.body.appendChild(canvas);
screenshotPreview.querySelector("img").src = canvas.toDataURL();
screenshotPreview.classList.add("show");
})
video.srcObject=stream;
console.log(stream)
} catch (error) {
console.log(error)
}
}
closeBtn.addEventListener("click", () => screenshotPreview.classList.toggle("show"));
screenshotBtn.addEventListener("click",captureScreen);
样式style.css
#src-btn,.screenshot{
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
}
#src-btn{
bottom: 15px;
border:none;
outline: none;
background-color: #4a98f7;
color: #fff;
font-size: 1rem;
padding: 15px 25px;
cursor: pointer;
border-radius: 25px;
}
.src-preview{
position: fixed;
display: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
}
.src-preview.show{
display: block;
}
.src-preview .screenshot{
width: 70%;
top: 50%;
aspect-ratio: 16 /9;
}
.screenshot img{
width: 100%;
}
.screenshot #close-btn{
position: absolute;
right: -25px;
cursor: pointer;
color: #fff;
font-size: 1.2rem;
}
以上，直接拷贝运行起来就OK了
