js canvas 给网页截图完整代码

在JavaScript中使用Canvas给网页截取全屏截图通常需要配合HTML5的`window.open()`、`toDataURL()`和`document.body`等API。以下是一个简单的示例代码，它会在新的标签页中生成并显示一张网页的截图：

function screenshot() {
    // 创建一个新的隐藏的iframe
    var iframe = document.createElement('iframe');
    iframe.style.position = 'fixed';
    iframe.style.top = '0';
    iframe.style.left = '0';
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    document.body.appendChild(iframe);

    // 设置iframe的src属性为当前页面URL
    iframe.src = window.location.href;

    // 等待iframe加载完成后获取其内容
    setTimeout(function() {
        var imgData = iframe.contentWindow.document.documentElement.toDataURL('image/png');
        
        // 创建一个新的canvas元素，并设置其宽度和高度
        var canvas = document.createElement('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var ctx = canvas.getContext('2d');

        // 将data URL转换为canvas的像素数据
        var img = new Image();
        img.src = imgData;
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
            
            // 获取canvas的blob对象
            var blob = canvas.toBlob(function(blob) {
                saveAs(blob, 'screenshot.png'); // 使用saveAs库保存图片
            }, 'image/png');
        };
    }, 100); // 等待100毫秒让iframe加载完成

    // 清理iframe
    setTimeout(function() {
        document.body.removeChild(iframe);
    }, 1000); // 等待1秒钟后移除iframe，防止内存泄漏
}

// 使用全局函数saveAs保存文件
function saveAs(blob, filename) {
    // 这里假设saveAs是某个支持浏览器兼容的第三方库提供的，例如html2canvas或者file-saver
    // 实际代码中需要引入这个库，并提供相应的下载功能
    // saveAs(blob, filename);
}

// 调用截图函数
screenshot();