与 img 标签相比，drawImage 生成质量差答案

【问题标题】：drawImage generates bad quality compared to img tag与 img 标签相比，drawImage 生成质量差
【发布时间】：2017-05-22 12:55:33
【问题描述】：

当我使用 drawImage 将图像放在画布上时，它看起来总是不如使用标签的同一图像清晰。我搜索了许多解决方案，例如下采样、平滑启用，但没有一个有帮助。如何提高drawImage的质量？

<html>
<head>
</head>
<body>
    <img src="test.png" width="550" height="405">
    <canvas id="image"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
    canvas.width = 550;
    canvas.height = 405;
    canvas.style.width  = canvas.width.toString() + "px";
    canvas.style.height = canvas.height.toString() + "px";

    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
    img.src = 'test.png';
</script>

【问题讨论】：

标签： html image canvas

【解决方案1】：

您的显示屏似乎是类似视网膜的。这可以通过查看屏幕截图的大小 (2264 × 886) 来确认。

这些显示器确实具有更高的像素密度。为了使网页的大小与作者的意图保持一致，它们会自动放大页面的所有内容。

这意味着您的<img> 标签实际上是在 1100x810 像素处绘制的，您的画布也是如此。
但是，这种自动化仅在表示级别 (CSS) 上完成。您的画布上下文仍然只包含 550x405 像素。因此，当在表示级别通过时，它必须通过 CSS 对其进行升级，这会导致质量损失。

没有万无一失的方法可以知道屏幕的 PPI（每英寸像素）比率，但由于window.devicePixelRatio 属性，您仍然可以尝试获取它。如果您的用户确实在浏览器的缩放级别上玩了很多，这可能是不准确的，但在 90% 的情况下，它可以正常工作。

一旦你有了这个，你可以手动为画布做浏览器所做的事情 <img> ：放大其内容并缩小其演示文稿。

var canvas = document.getElementById('image');
var ctx = canvas.getContext('2d');
// upscale the canvas content
canvas.width = 550 * devicePixelRatio;
canvas.height = 405 * devicePixelRatio;
// downscale the presentation
canvas.style.width = (canvas.width / devicePixelRatio).toString() + "px";
canvas.style.height = (canvas.height / devicePixelRatio).toString() + "px";

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = 'https://i.stack.imgur.com/s15bD.png';

<img width="550" height="405" src="https://i.stack.imgur.com/s15bD.png" />
<canvas id="image"></canvas>

【讨论】：

哇，这是一个了不起的解决方案！谢谢
我也想用惊人这个词！这就像一个魅力。非常感谢:)