我希望从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';
}
网页上的图片可以绘制在画布上,但质量非常低。下面是上述链接中的原始图像:
![enter image description here](https://istack.dev59.com/M9pWp.webp)
![enter image description here](https://istack.dev59.com/S6y3Y.webp)