如何使用画布drawImage处理质量损失？

Question

我在 Stackoverflow 上看到了这个问题，但我没有找到答案 - 提出的所有解决方案都对我不起作用。

问题：当我将 base64 编码的 SVG 作为 src 传递给图像时，它看起来与原始 SVG 图像一样清晰。但是，如果我将这张图片用在画布中（通过 context.drawImage）——它的质量会更差：

问题是 - 如何在画布中绘制看起来像原始图像的基于 svg 的图像？

到目前为止我尝试了什么。 here（重新迭代下采样）描述的方法对我不起作用。另一个advise（给尺寸增加0.5）也没有保存这种情况。与imageSmoothingEnabled 一起玩 - 仍然没有运气。

这是用于生成此特定屏幕截图的the codepen：

let toBase64 = (svg) => {
  let serialized = new XMLSerializer().serializeToString(svg);
  let base64prefix = "data:image/svg+xml;base64,"
   let enc = base64prefix + btoa(serialized);
  return enc;
}

let copySvg = (svg, img) => {
  let enc = toBase64(svg);
  img.src = enc;
}

let copyImg = (img, canvas) => {
  context = canvas.getContext("2d");
  context.drawImage(img, 0, 0, 200.5, 200.5);
}

let main = () => {
   let svg = document.getElementById("svg");
   let img = document.getElementById("img");
   let canvas = document.getElementById("canvas");
   copySvg(svg, img);
   copyImg(img, canvas);
}

window.onload = main;

Answer 1

SVG 和 Image 以高 DPI 隐式绘制，但您需要为画布显式处理这种情况。

如果您的设备有window.devicePixelRatio === 2，如果您增加画布大小并更新 drawImage 以匹配，您会看到更清晰的图像：

<!-- Change this -->
<canvas id="canvas" width="200" height="200"></canvas>
<!-- to -->
<canvas id="canvas" width="400" height="400"></canvas>

还有：

// change this:
context.drawImage(img, 0, 0, 200.5, 200.5);
// to:
context.drawImage(img, 0, 0, 400, 400);

Forked codepen

有关window.devicePixelRatio（和canvas 的backingStorePixelRatio）的更多详细信息，请参阅High DPI Canvas 上的html5rocks 文章