彻底解决html2canvas打印模糊的问题，告别打印图片雾蒙蒙的烦恼

前端

2024-01-10 08:35:36

什么是HTML2Canvas？

HTML2Canvas是一个JavaScript库，能够将网页内容转换为图像。在开发中经常用于截图、打印等场景。然而，生成的图片有时会显得模糊，影响了输出质量和用户体验。

模糊的原因分析

HTML2Canvas默认使用低分辨率进行渲染，导致生成的图像细节丢失。此外，在某些浏览器和设备上，由于渲染引擎的不同，也会出现不同的显示效果，进而造成打印出来的图片不清晰。

解决方案一：调整Scale参数

提高scale值可以增加输出图片的清晰度。scale值决定了生成图像与原始网页的比例关系，适当的增大这个比例可以得到更精细的截图。

代码示例:

html2canvas(document.body, {
    scale: 2 // 原始尺寸的两倍
}).then(canvas => {
    document.body.appendChild(canvas);
});

操作步骤：

确定要截取的元素。
调用html2canvas函数，设置scale参数为大于1的值以提升图像质量。

解决方案二：CSS样式调整

通过调整CSS来优化截图前页面的状态。例如，增大字体大小或图片尺寸等可以确保最终生成的截图更加清晰。

代码示例:

@media print {
    body * {
        font-size: 16pt !important; /* 增加字体大小 */
        image-resolution: -webkit-optimize-contrast;
        image-rendering: optimizeQuality;
    }
}

操作步骤：

在CSS文件或<style>标签中添加媒体查询。
调整相关样式属性以增强打印清晰度。

解决方案三：使用Canvas的High DPI模式

通过设置canvas元素为高DPI渲染模式，可以在支持此功能的设备上获得更高质量的输出图像。这需要手动获取并操作canvas对象来完成。

代码示例:

html2canvas(document.body, {
    allowTaint: true,
    scale: window.devicePixelRatio || 1 // 使用设备像素比率
}).then(canvas => {
    var ctx = canvas.getContext('2d');
    canvas.width *= 2;
    canvas.height *= 2;
    ctx.scale(2, 2);
    ctx.drawImage(canvas, 0, 0);

    document.body.appendChild(canvas);
});