javascript - 如何使用 Canvas drawImage 处理质量损失？

Question

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

问题:当我将 base64 编码的 SVG 作为 src 传递给图像时，它看起来像原始 SVG 图像一样清晰。但如果我将这张图片用于 Canvas (通过 context.drawImage)——它的质量会更差:

问题是 - 如何在 Canvas 中绘制基于 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 和图像是在高 DPI 下隐式绘制的，但您需要为 Canvas 显式处理这种情况。

如果您的设备有 window.devicePixelRatio === 2，如果您增加 Canvas 大小并更新 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 文章