使用html2canvas保存HTML元素时图片模糊问题求助

模糊原因 #

1. 缩放画布的分辨率不匹配：第一个canvas的原生尺寸是10x10，但通过CSS拉伸到500x500显示。html2canvas默认按元素的显示尺寸捕获，会将低分辨率的画布内容直接拉伸，导致模糊。
2. 未处理设备像素比(DPR)：现代高DPI屏幕下，浏览器会用更多物理像素渲染元素，html2canvas默认不考虑这个因素，捕获的图像分辨率不足。
3. image-rendering: pixelated属性未被正确识别：html2canvas对CSS图像渲染属性的支持有限，无法保留像素化的锐利效果。

解决方案 #

方案1：配置html2canvas的缩放参数 #

通过设置scale选项（结合设备像素比）来提升捕获分辨率，同时启用imageRendering选项强制像素化渲染：

function downloadImage(format) {
    const gridContainer = document.getElementById("grid-container");
    const dpr = window.devicePixelRatio || 1;

    html2canvas(gridContainer, {
        scale: dpr, // 匹配设备像素比
        imageRendering: 'pixelated' // 强制像素化渲染
    }).then(function (canvas) {
        // 调整下载文件名的尺寸为实际分辨率
        const actualWidth = gridContainer.offsetWidth * dpr;
        const actualHeight = gridContainer.offsetHeight * dpr;
        const imageDataURL = canvas.toDataURL(`image/${format}`);
        
        const tempLink = document.createElement("a");
        tempLink.href = imageDataURL;
        tempLink.download = `pixelroyal-${actualWidth}x${actualHeight}-download.${format}`;
        tempLink.click();
    });
}

方案2：直接合成两个画布内容 #

跳过html2canvas对DOM的捕获，直接获取两个canvas的图像数据并合成到新画布，这样能完全保留原始分辨率和像素化效果：

function downloadImage(format) {
    const [smallCanvas, largeCanvas] = document.querySelectorAll("#grid-container canvas");
    const targetSize = 500; // 最终图像尺寸
    const dpr = window.devicePixelRatio || 1;
    
    // 创建合成画布
    const compositeCanvas = document.createElement("canvas");
    compositeCanvas.width = targetSize * dpr;
    compositeCanvas.height = targetSize * dpr;
    const ctx = compositeCanvas.getContext("2d");
    
    // 设置像素化渲染
    ctx.imageRendering = 'pixelated';
    
    // 绘制小画布（按比例放大）
    ctx.drawImage(smallCanvas, 0, 0, compositeCanvas.width, compositeCanvas.height);
    // 绘制大画布
    ctx.drawImage(largeCanvas, 0, 0, compositeCanvas.width, compositeCanvas.height);
    
    // 生成下载链接
    const imageDataURL = compositeCanvas.toDataURL(`image/${format}`);
    const tempLink = document.createElement("a");
    tempLink.href = imageDataURL;
    tempLink.download = `pixelroyal-${targetSize}x${targetSize}-download.${format}`;
    tempLink.click();
}

注意事项 #

• SVG格式：html2canvas无法直接生成SVG，因为它是基于Canvas的位图捕获。如果需要SVG，你需要手动将canvas内容转换为SVG元素，或者直接从原始数据生成SVG。

内容的提问来源于stack exchange，提问作者Sysads Gazette