JavaScript实现网页截图功能

主要用到截图插件:js-screen-shot: Web 端自定义截屏插件 (原生 JS 版)

主要用到./screenShotPlugin.umd.js文件:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
    <script src="./screenShotPlugin.umd.js"></script>
</head>


<style>
    #map {
        height: 600px;
        width: 600px;
        background-color: blue;
    }

    .red {
        height: 200px;
        width: 200px;
        background-color: red;
    }
</style>

<body>

    <div class="demo-container">
        <div id="map">
            <div class="red" id="red"></div>


        </div>
    </div>
    <button id="saveImg">截图</button>

</body>



<script type="text/javascript">


    $("#saveImg").on("click", function () {


        const screenShotHandler = new screenShotPlugin({
            enableWebRtc: false,  //是否显示选项框
            level: 99,  //层级级别
            completeCallback: this.callback,
            closeCallback: this.closeFn,
        });
    })
</script>



</html>

猜你喜欢

转载自blog.csdn.net/weixin_38959210/article/details/128370605