当前位置：首页 > jquery

jquery 截图

2026-04-08 10:50:39jquery

jQuery 实现网页截图的方法

使用 jQuery 结合其他库或插件可以实现网页截图功能。以下是几种常见的实现方式：

使用 html2canvas 库 html2canvas 是一个流行的 JavaScript 库，可以将网页元素转换为 canvas 图像。

// 引入 html2canvas
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

// 使用 jQuery 调用
$('#captureBtn').click(function() {
    html2canvas(document.body).then(function(canvas) {
        var imgData = canvas.toDataURL('image/png');
        var link = document.createElement('a');
        link.download = 'screenshot.png';
        link.href = imgData;
        link.click();
    });
});

使用 dom-to-image 库 dom-to-image 是另一个轻量级的解决方案，专门用于将 DOM 节点转换为图像。

// 引入 dom-to-image
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>

// 使用 jQuery 调用
$('#captureBtn').click(function() {
    domtoimage.toPng(document.getElementById('element-to-capture'))
        .then(function(dataUrl) {
            var link = document.createElement('a');
            link.download = 'screenshot.png';
            link.href = dataUrl;
            link.click();
        });
});

使用 rasterizeHTML.js 这个库更适合需要精确控制渲染过程的场景。

// 引入 rasterizeHTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizeHTML.js/1.3.0/rasterizeHTML.allinone.js"></script>

// 使用 jQuery 调用
$('#captureBtn').click(function() {
    var element = $('#element-to-capture').get(0);
    rasterizeHTML.drawHTML(element.outerHTML)
        .then(function(renderResult) {
            var canvas = renderResult.image;
            var imgData = canvas.toDataURL('image/png');
            var link = document.createElement('a');
            link.download = 'screenshot.png';
            link.href = imgData;
            link.click();
        });
});