html2canvas插件Canvas渲染模糊问题求助

我之前也碰到过html2canvas导出图片模糊的情况，主要是默认配置没考虑高分屏（比如Retina屏）的设备像素比，或者画布缩放不足导致的。这里分享几个亲测有效的解决办法：

1. 手动提高scale参数提升分辨率 #

html2canvas默认缩放比例是1，在高分屏上会显得模糊。你可以直接设置scale为2或更高，快速提升生成图片的清晰度：

html2canvas($("#captureDiv"), {
  background: '#FFFFFF',
  scale: 2, // 常用值为2，可根据需求调整到3
  onrendered: function(canvas) {
    document.getElementById("canvasHolder").appendChild(canvas);
    var imgsrc = canvas.toDataURL("image/png");
    $("#image").attr('src', imgsrc);
  }
});

2. 结合设备像素比（DPR）动态适配 #

不同设备的屏幕像素密度不一样，比如Retina屏的DPR是2，普通屏幕是1。用window.devicePixelRatio动态设置缩放比例，能让图片在所有设备上都清晰：

const dpr = window.devicePixelRatio || 1;

html2canvas($("#captureDiv"), {
  background: '#FFFFFF',
  scale: dpr, // 跟随设备像素比自动调整
  onrendered: function(canvas) {
    // 修正canvas显示时的拉伸问题
    canvas.style.width = canvas.width / dpr + 'px';
    canvas.style.height = canvas.height / dpr + 'px';
    
    document.getElementById("canvasHolder").appendChild(canvas);
    var imgsrc = canvas.toDataURL("image/png");
    $("#image").attr('src', imgsrc);
  }
});

3. 明确指定画布宽高避免自动计算误差 #

有时候html2canvas自动计算的宽高会有偏差，手动指定目标div的实际尺寸再配合缩放，能进一步优化清晰度：

const captureDiv = document.getElementById("captureDiv");
const targetWidth = captureDiv.offsetWidth;
const targetHeight = captureDiv.offsetHeight;
const dpr = window.devicePixelRatio || 1;

html2canvas($("#captureDiv"), {
  background: '#FFFFFF',
  width: targetWidth,
  height: targetHeight,
  scale: dpr,
  onrendered: function(canvas) {
    canvas.style.width = targetWidth + 'px';
    canvas.style.height = targetHeight + 'px';
    
    document.getElementById("canvasHolder").appendChild(canvas);
    var imgsrc = canvas.toDataURL("image/png");
    $("#image").attr('src', imgsrc);
  }
});

这些方法的核心都是通过增加画布的实际像素数量，抵消高分屏的像素密度差异，从而生成清晰的图片。你可以先试第一种方法，大部分场景下scale:2就能解决模糊问题，如果还有瑕疵，再结合设备像素比调整。

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