使用原生js對網(wǎng)頁進(jìn)行截圖，直接上代碼
1、目錄結(jié)構(gòu)
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" >
? ? <title>screenshot</title>
? ? <script src="script.js" defer></script>
</head>
<body>
? ? <h1>習(xí)近平會見基辛格 我們不忘老朋友</h1>
? ? <p>習(xí)近平指出，基辛格博士剛剛度過百歲生日，你訪問中國已經(jīng)一百多次。這兩個“一百”加在一起，使你這次訪華具有特殊意義。52年前，中美兩國處在一個關(guān)鍵轉(zhuǎn)折點，毛澤東主席、周恩來總理同尼克松總統(tǒng)和你本人以卓越的戰(zhàn)略眼光，作出中美合作的正確抉擇，開啟了中美關(guān)系正?；M(jìn)程，既造福了兩國，也改變了世界。中國人重情講義，我們不會忘記老朋友，不會忘記你為推動中美關(guān)系發(fā)展、增進(jìn)中
? ? </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了
