如何调整图像大小以适应小的HTML5画布而不损失图像质量？

12 浏览
0 Comments

如何调整图像大小以适应小的HTML5画布而不损失图像质量？

这是我的代码。我希望能在画布上绘制图像，而不会损失图像的质量。

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
canvas.width = 360px;
canvas.height = 360px;
const img = new Image();
img.src = "some-image.jpg"; // 图像尺寸为3840*2594像素
const scale = Math.min(
  canvas.width / img.width,
  canvas.height / img.height
);
// 获取图像左上角位置
const x = canvas.width / 2 - (img.width / 2) * scale;
const y = canvas.height / 2 - (img.height / 2) * scale;
context.drawImage(img, x, y, img.width * scale, img.height * scale);

0

1 答案

0 Comments

问题的出现原因是JavaScript本身没有包含用于调整图像大小的好算法，它只是减少图像中的像素数量（除了目前在Google Chrome中已经实现了实验性的imageSmoothingQuality功能）。

解决方法是使用第三方库或代码尝试实现双线性图像采样和双三次图像采样。可以参考这个页面获取更多细节和代码示例：https://www.strauss-engineering.ch/posts/js-bilinear-interpolation.html。

0