HTML5 Canvas 如何缩小图像并保持最佳质量？

javascript

2024-03-06 23:35:46

HTML5 Canvas 图像缩小

简介

缩小图像尺寸是图像处理中一项常见的任务。使用 HTML5 Canvas 可以轻松地完成此任务，但如果不当操作，可能会导致图像质量下降。本文将深入探讨使用 HTML5 Canvas 缩小图像尺寸的方法，重点关注如何获得最佳图像质量。

理解 Canvas 缩放

HTML5 Canvas 提供了 drawImage() 方法，可用于缩小或放大图像。但是，Canvas 默认使用 Nearest Neighbor 算法进行缩放，该算法会导致图像失真和像素化。

启用平滑缩放

为了使用双线性或双三次插值算法（这些算法提供更好的图像质量），我们需要在绘制图像之前将 imageSmoothingEnabled 属性设置为 true：

ctx.imageSmoothingEnabled = true;

计算新尺寸

确定缩小后的新尺寸非常重要。Canvas 使用整数宽度和高度，因此我们需要将新尺寸四舍五入到最接近的整数。

var newWidth = img.width * ratio;
var newHeight = img.height * ratio;

创建新 Canvas

接下来，创建一个新的 Canvas，其尺寸为新尺寸。

var newCanvas = document.createElement("canvas");
var newCtx = newCanvas.getContext("2d");

绘制新图像

使用 drawImage() 方法将原始图像绘制到新 Canvas 上。

newCtx.drawImage(img, 0, 0, newWidth, newHeight);

代码示例

下面是一个代码示例，展示了如何使用 HTML5 Canvas 缩小图像尺寸：

reader.onloadend = function(e) {
  var img = new Image();
  var ctx = canvas.getContext("2d");
  var newCanvas = document.createElement("canvas");
  var newCtx = newCanvas.getContext("2d");

  img.onload = function() {
    var ratio = 1;

    if (img.width > maxWidth) ratio = maxWidth / img.width;
    else if (img.height > maxHeight) ratio = maxHeight / img.height;

    newCanvas.width = img.width * ratio;
    newCanvas.height = img.height * ratio;
    newCtx.drawImage(img, 0, 0, newCanvas.width, newCanvas.height);

    ctx.imageSmoothingEnabled = true;
    ctx.drawImage(newCanvas, 0, 0, newCanvas.width, newCanvas.height, 0, 0, canvas.width, canvas.height);
  };

  img.src = reader.result;
};