html2canvas截图并且下载

最新推荐文章于 2024-06-05 15:54:14 发布

奇先僧i

最新推荐文章于 2024-06-05 15:54:14 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_43677987/article/details/108098378

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/html2canvas.min.js"></script>
</head>

<body>
    <div id="view" style="background:url(/img/simple.jpg) 50%; width: 500px; height: 500px;">
        <input type="button" value="截屏" οnclick="testScreen()">
    </div>
    <script>
        function testScreen() {
            console.log('test');
            html2canvas(document.getElementById('view'), {
                useCORS: true
            }).then((canvas) => {
                // 返回一个canvas 对象
                document.body.appendChild(canvas);
                // 转化成 dataurL
                let canvasImg = canvas.toDataURL("image/png");
                downLoadFile("simple", canvasImg);
            })
        }

        function downLoadFile(fileName, canvasImg) {
            //创建一个a标签
            var a = document.createElement('a')
            //指定下载文件名称
            a.href = canvasImg;
            a.download = fileName
            //a 标签 需要点击触发。所以强制给他分派一个点击事件
            //创建一个鼠标事件
            let event = document.createEvent("MouseEvents")
            // 初始化鼠标事件
            event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
            // 指定元素对象触发事件
            a.dispatchEvent(event)
        }
    </script>
</body>

</html>