需要将一个div导出为多个相同高度的高清图像进行打印，但图像模糊

Question

我正在尝试将 div toto 导出为高清图像：

• 图像应该具有高清分辨率（我真的不在乎文件是否很重）
• div 应导出为多个具有固定高度（在脚本中定义）和固定宽度（div“toto”宽度）的图像
• 最终格式应为jpg/jpeg。

脚本有效，只是图像模糊，文本模糊......所以图像不能用于打印。

即使设置dpi 600也没有任何效果。

实际上 SCALE 和 DPI 对最新版本的 html2canvas 没有影响。

我用 html2canvas 编写了一个脚本，但无法改进它。

这是我的代码：

document.getElementById('captureButton').addEventListener('click', function() {
    const mybook = document.getElementById('toto');

    const scale = 1;
    const segmentHeight = 800;

    const captureScreenshots = (canvas, totalHeight) => {
        const numSegments = Math.ceil(totalHeight / segmentHeight);

        for (let i = 0; i < numSegments; i++) {
            const segmentCanvas = document.createElement('canvas');
            const context = segmentCanvas.getContext('2d');

            const sourceY = i * segmentHeight;
            const destY = 0;

            segmentCanvas.width = canvas.width; // Keep the same width
            segmentCanvas.height = segmentHeight;

            context.drawImage(canvas, 0, sourceY, canvas.width, segmentHeight, 0, destY, canvas.width, segmentHeight);

            const dataURL = segmentCanvas.toDataURL('image/jpeg');

            const a = document.createElement('a');
            a.href = dataURL;
            a.download = `screenshot-${i}.jpeg`;
            a.click();
        }
    };

    html2canvas(mybook, {
        dpi: 600,
        scale: 5,
        useCORS: true,
        logging: true,
        letterRendering: true,
    }).then(function(canvas) {
        const totalHeight = canvas.height;

        if (totalHeight > segmentHeight) {
            captureScreenshots(canvas, totalHeight);
        } else {
            const dataURL = canvas.toDataURL('image/jpeg');

            const a = document.createElement('a');
            a.href = dataURL;
            a.download = 'screenshot.jpeg';
            a.click();
        }
    });
});

我不知道是否可以使用 html2canvas 获取高清图像。也许有人有替代解决方案的想法？

到目前为止，我花了几天时间（好吧......这里是新手！）并测试了 html2canvas，我还测试了 domtoimage（但没有成功使其工作）。

感谢您阅读我的文章。

-- 消息和标题已编辑 --

Answer 1

代码中生成的 JPEG 图像的质量取决于多个因素，包括比例、段高度和 DPI 设置。请务必记住，生成的图像的分辨率和质量还取决于“toto”div 的内容和浏览器的渲染功能。

以下是一些可能提高导出的 JPEG 图像质量的建议：

1. 增加规模： 您可以增加 html2canvas 选项中的比例值来捕获更高分辨率的图像。例如，您可以将比例设置为 10 或更高以获得更好的质量。

2. 调整DPI： 将 DPI 增加到 600 是一个好的开始，但如果需要，您可以尝试更高的值，例如 1200 或更高。

3. 将 letterRendering 设置为 false： letterRendering 选项旨在改进文本渲染，但在某些情况下，它可能会导致文本模糊。您可以尝试将其设置为 false 看看是否可以提高文本质量。

4. 使用更大的段高度： SegmentHeight 确定捕获长内容时每个段的高度。您可以增加它以确保每个片段具有更高的质量。但是，这可能会导致文件大小更大。

5. 优化内容： 确保“toto”div 内的内容一开始就具有高分辨率。如果内容分辨率较低，增加比例可能不会产生明显更好的结果。

6. 尝试不同的格式： 您可以尝试以不同的格式（例如 PNG）捕获图像，而不是 JPEG，这可能会以更大的文件大小为代价提供更好的质量。

请记住，生成非常高分辨率的图像可能会导致文件较大且渲染速度较慢，因此请找到适合您的特定用例的平衡点。此外，输出的质量也会受到内容中使用的特定字体、文本渲染和 CSS 属性的影响。