如何在不损失图像质量的情况下调整图像大小以适合小型 HTML5 画布？ [复制]

Posted 2023-03-05

【中文标题】如何在不损失图像质量的情况下调整图像大小以适合小型 HTML5 画布？ [复制]

【英文标题】：How to resize image to fit on a small HTML5 canvas without loosing image quality? [duplicate]

【发布时间】：2021-05-04 03:15:58

【问题描述】：

这是我的代码。我希望能够在不损失图像质量的情况下在画布上绘制图像。

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" // image size is 3840*2594px

var scale = Math.min(
        canvas.width / img.width,
        canvas.height / img.height
      );
      // get the top left position of the image
      var x = canvas.width / 2 - (img.width / 2) * scale;
      var y = canvas.height / 2 - (img.height / 2) * scale;

context.drawImage(img, x, y, img.width * scale, img.height * scale);

【参考方案1】：

这个问题在这里或多或少得到了回答：https://***.com/a/19262385/3767825。

主要问题是 javascript 实际上并没有包含任何好的算法来调整图像大小，它只是减少了图像中的像素数量（除了目前实现了实验性imageSmoothingQuality 功能的谷歌浏览器）。

也有第三方库和代码尝试实现双三次图像采样和双线性图像采样。请查看此页面以获取更多详细信息和代码示例：https://www.strauss-engineering.ch/js-bilinear-interpolation.html。