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

Question

我在 Stackoverflow 上看到过这个问题，但我未能找到答案 - 提出的所有解决方案都不适合我。

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

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

到目前为止我已经尝试过什么。这里描述的方法（重新迭代下采样）对我来说不起作用。另一个建议（在尺寸上添加 0.5）也没有挽救这种情况。玩imageSmoothingEnabled - 仍然没有运气。

这是用于生成此特定屏幕截图的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 和图像是在高 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);

分叉的代码笔

有关window.devicePixelRatio（和画布）的更多详细信息，请参阅有关高 DPI 画布backingStorePixelRatio的 html5rocks 文章