前端实现截屏处理

首先需要先引入两个js

<script src="./jquery-3.4.1.min.js"></script>

<script src="./html2canvas.js"></script>

$(\'.btn\').click(function () {
            //#proMain:要截图的DOM元素
            //useCORS:true:解决跨域问题
            html2canvas(document.querySelector(\'#proMain\'),{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("image/png");
                //保存图片
                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);
                // 把截的图显示在网页上
                var img = document.createElement(\'img\');//创建一个标签
                img.setAttribute(\'src\',imgData);//给标签定义src链接
                document.getElementById(\'box\').appendChild(img);  
            })
    })
        // 代理事件(append之后的标签无法设置事件)
        $(\'#box\').on(\'click\',function (e) {
            var target=e.target||e.srcElement;//获取当前点击的对象
            console.log(target.src)
            $(\'.bigImg\').attr(\'src\',target.src);
            $(\'.bigImg\').css(\'display\',\'block\')
        });

截屏得到的是一个加密的base64地址