javascript - 如何以原始质量从 Canvas 上的 URL 绘制图像

Question

我想从 url 加载图像并将其绘制在我的 Canvas 上。我的 Canvas 采用全窗口大小，我只希望图像显示在鼠标位置，大小为 100x100。下面是我的代码:

drawImage(imageUrl) {
    const ctx = this.canvas.getContext('2d');
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    const image = new Image();
    image.onload = () => {
      ctx.imageSmoothingEnabled = false;
      ctx.drawImage(image, this.state.mousePos.x, this.state.mousePos.y,
        100, 100);
    };
    image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

  }

可以在网页上绘制图像，但质量很低。下面是来自上面链接的原始图像:

下面是在我的 Canvas 上显示的图像:

您可以比较两张图片，它们的质量大不相同。如何在 Canvas 上绘制高质量的图像？

Answer 1

let canvas = document.getElementById('c'),ctx = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
  ctx.imageSmoothingEnabled = false;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 50, 50,500,500);
};
image.src = 'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66';

canvas{
 border : 2px solid black;
}

<canvas id='c' width=500 height=500/>

如果您依赖图像质量，请使用 svg。