JS截屏

最新推荐文章于 2024-07-11 21:46:16 发布

道亦呀

最新推荐文章于 2024-07-11 21:46:16 发布

阅读量721

点赞数 1

分类专栏： js JavaScript 文章标签： javascript js html canvas jquery

本文链接：https://blog.csdn.net/weixin_44653849/article/details/110520468

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

效果图

html代码结构如下

<body id="indexbody">
    <div id="header" style="background-color:red;width:500px;height:500px;">
        <div id="infobar">欢迎您！</div>
    </div>
     <input type="button" id="saveData" name="" value="截图">
</body>

引入js相关文件

 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js
 https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js

最终执行逻辑

$('#saveData').click(function () {
        //#proMain:要截图的DOM元素
        //useCORS:true:解决跨域问题
        html2canvas(document.querySelector('#header'),{useCORS:true}).then(function (canvas) 
   {
            //获取年月日作为文件名
            var timers=new Date();
            var fullYear=timers.getFullYear();
            var month=timers.getMonth()+1;
            var date=timers.getDate();
            var randoms=Math.random()+'';
            //年月日加上随机数
            var numberFileName=fullYear+''+month+date+randoms.slice(3,10);
            var imgData=canvas.toDataURL();
            //保存图片
            var saveFile = function(data, filename){
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };
            //最终文件名+文件格式
            var filename = numberFileName + '.png';
            saveFile(imgData,filename);
            // document.body.appendChild(canvas);  
            //把截的图显示在网页上
        })
    })

点击链接加入群聊：企鹅群:827944755

道亦呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS截屏

效果图html代码结构如下<body id="indexbody"> <div id="header" style="background-color:red;width:500px;height:500px;"> <div id="infobar">欢迎您！</div> </div> <input type="button" id="saveData" name="" value="截图"&g
复制链接

扫一扫