为什么 HTML Canvas 图像出现像素化？

Question

问题

我使用简单的 HTML 和使用 Canvas 放置了相同的图像 (Netflix)，Canvas 版本比简单标签版本像素化程度更高。

我的尝试

• 我已尝试更改画布的比例并设置 window.pixelDeviceRatio = 2，它确实略有改善，但似乎仍然像素化。
• 我也尝试设置context.imageSmoothingEnabled= false，但这并没有改变任何东西。
• 设置context.smoothImageQuality = high，查看下面的照片以了解其外观

如果您知道如何安装它，请告诉我！

window.onload = () => {
  var dpi = window.devicePixelRatio;
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var imgLogo = document.getElementById("logo");
  context.imageSmoothingEnabled = false;
  context.drawImage(imgLogo, 0, 0, 175, 98.438);
}

.hidden {
  display: none;
}

<img class = "hidden" id = "logo" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" width="200"/>


<canvas id = "myCanvas" height = "150" width = "500">
 </canvas>
 
 
<div class="blend1">
  <div id="logoContainer">
    <img src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" width="175" />
  </div>
</div>

Answer 1

经过一番研究，我终于找到了一个非常简单的解决方案。我想知道为什么这么难找到。就这么简单：

context.imageSmoothingQuality = "high";

因此，通过以下方式，您应该得到两个同样平滑的徽标：

window.onload = () => {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var imgLogo = document.getElementById("logo");

  // Only set this value
  var valueX = 256;

  var valueY = valueX / 16 * 9;
  imgLogo.width = valueX;
  canvas.width = valueX;
  canvas.height = valueY;
  context.imageSmoothingQuality = "high"; // or "low" or "medium"
  context.drawImage(imgLogo, 0, 0, valueX, valueY);
}

.hidden {
  display: none;
}

<img class = "hidden" id = "logo" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" width="200"/>


<canvas id = "myCanvas" height = "150" width = "500">
 </canvas>
 
 
<div class="blend1">
  <div id="logoContainer">
    <img src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png" width="175" />
  </div>
</div>

Source.

Some also recommend 在隐藏的更大画布中绘制，然后每次将图片减半时重新绘制，但我认为这个解决方案已经足够好了，而且显然要简单得多。

PS 1：显然它只适用于基于 Chromium 的浏览器。如果您想支持其他浏览器，您可能需要按照上面的链接进行操作。

PS 2： Check browser support for imageSmoothingQuality.