网页截图（原生js）

使用原生js对网页进行截图，直接上代码

1、目录结构

目录结构

index.html页面

   

   

   

   

   

   

   

习近平会见基辛格 我们不忘老朋友

   

习近平指出，基辛格博士刚刚度过百岁生日，你访问中国已经一百多次。这两个“一百”加在一起，使你这次访华具有特殊意义。52年前，中美两国处在一个关键转折点，毛泽东主席、周恩来总理同尼克松总统和你本人以卓越的战略眼光，作出中美合作的正确抉择，开启了中美关系正常化进程，既造福了两国，也改变了世界。中国人重情讲义，我们不会忘记老朋友，不会忘记你为推动中美关系发展、增进中

   

   

席先生，我很荣幸能够访问

   

席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问席先生，我很荣幸能够访问

    截图保存

   

       

           

           

       

   

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了