保存屏幕快照

最新推荐文章于 2025-07-18 11:37:34 发布

原创最新推荐文章于 2025-07-18 11:37:34 发布 · 618 阅读

0 ·

CC 4.0 BY-SA版权

初级经验分享专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何使用saveInformation方法来截取屏幕内容，并将其保存为PNG格式的图像文件。

引用html2canvas插件
下载地址：https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.12/html2canvas.js


function saveInformation() {
    html2canvas(document.querySelector('html'),{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 = '屏幕截图图片名称.png';
        saveFile(imgData,filename);
        document.body.appendChild(canvas);  //把截的图显示在网页上
    })
}

调用saveInformation 方法，可以截取当前屏幕，并保存为PNG格式的图片