如何在画布上以原始质量从URL绘制图像

Question

我希望从URL加载图像并将其绘制在画布上。我的画布占据整个窗口大小，我只想在鼠标位置显示大小为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';

  }

网页上的图片可以绘制在画布上，但质量非常低。下面是上述链接中的原始图像： 以下是在我的画布上显示的图像： 你可以比较这两个图像，它们的质量有很大的不同。如何在画布上绘制高质量的图像？

- Joey Yi Zhao

---

图片的宽度和高度是否已经明确定义？ - Álvaro Touzón

将其调整为158 X 158以避免重新采样锯齿。如果没有细微的颜色渐变，也可以尝试调整抗锯齿设置。 - dandavis

应用于画布的CSS宽度和高度会拉伸它，但您没有提供该信息。 - kamoroso94

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。

- Durga

---

你好，能否帮忙解决如何从上述代码中获取base64字符串的问题？因为toDataURL方法会抛出CORS策略错误。 - Riya Singh