时间戳

首页 > 解决方案 > 画布上的图像看起来与 html标记中的图像不同

javascript - 画布上的图像看起来与 html标记中的图像不同

问题描述

我正在尝试使用 HTML 画布裁剪图像。但即使在裁剪图像之前，当我在画布上渲染它时，图像看起来也很模糊。然后我使用 HTML 标签渲染了相同的图像，并且图像并不模糊。我为画布和 img 标签使用了 300px 的宽度和高度。我似乎无法找出为什么图像在画布中看起来模糊。

const img = document.querySelector(".my-image");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);

在图像标签上渲染的图像如下所示： 使用标签渲染的图像

在画布上渲染的图像如下所示： 在画布上渲染的图像

标签： javascripthtmlimagecanvasblurry

解决方案

如果我查看您分享的两张图片，这两张图片似乎是 600x600 像素。

  • 在第一种情况下，使用img标签，图像似乎以 600x600 像素显示。
  • 在第二种情况下，使用该canvas方法，您将图像裁剪为 300x300 像素，但您的页面通过将其拉伸到 600x600 像素来显示结果，这似乎会产生这种模糊效果。

有关浏览器提供的图像大小的信息

推荐阅读