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

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

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

问题是-如何在画布中绘制类似于原始图像的基于svg的图像

到目前为止我都试了些什么。所描述的方法（重新迭代下采样）不适用于我。另一个（向尺寸标注添加0.5）也未保存该情况。玩游戏-仍然没有运气

以下用于生成此特定屏幕截图：

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;

---

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>

---

有关

window.devicePixelRatio

（以及canvas的

backingStorePixelRatio

）的更多详细信息，请参阅html5rocks上的文章，searla的答案是正确的，您可能使用的是高dpi监视器。不相关但仍然重要的是，您需要等待图像加载后才能在画布上绘制（您的codepen不适用于我），并且只有chrome支持绘制svg，而不包含绝对高度和宽度。正确，但是

backingStorePixelRatio

已被弃用，甚至已从实现中删除（Safari的一个前缀下除外）。如果我有机会多次投票，我就这么做了，谢谢！

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