JS图片等比例缩放方法完整示例

下面就来详细讲解“JS图片等比例缩放方法完整示例”的完整攻略。

1. 大纲

本文将会从以下四个方面来讲解该方法的完整示例：

场景分析及初步认识缩放原理；
原理分析；
核心代码介绍，包括方法和参数含义；
示例演示。

2. 场景分析及初步认识缩放原理

在制作网页时，常会用到缩略图或图片缩放等操作，而缩略图或图片缩放往往需要图片按照比例缩放，以保证图片不会出现形变。因此，需要了解图片等比例缩放的原理。

图像缩放原理：按照比例缩小/放大，同时调整长宽比例。

按照比例缩放时，我们需要考虑两个因素：新的宽度和新的高度，这个时候需要设置一个基准值，比如新的宽度为100px或新的高度为100px，然后根据原图的长和宽来计算出缩放比例，并计算出新的宽度和高度。

3. 原理分析

在代码中实现等比例缩放，需要考虑以下三点：

缩放时，图片是否应该等比例缩放；
缩放时，图片占据的容器的大小决定图片缩放后的大小；
当需要缩放时，通常情况下会调整长和宽，同时保持长宽比例不变。

4. 核心代码介绍

代码实现涉及到两个方法：计算缩放的宽高、缩放图片。

计算缩放的宽高

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
  var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
  return { width: srcWidth * ratio, height: srcHeight * ratio };
}

该方法的参数含义如下：

srcWidth：图片原始宽度；
srcHeight：图片原始高度；
maxWidth：缩放后的最大宽度；
maxHeight：缩放后的最大高度。

缩放图片

function scaleImage(imageArray, maxWidth, maxHeight) {
  imageArray.forEach(function (img) {
    var newSize = calculateAspectRatioFit(
      img.naturalWidth,
      img.naturalHeight,
      maxWidth,
      maxHeight
    );
    img.width = newSize.width;
    img.height = newSize.height;
  });
}

该方法的参数含义如下：

imageArray：图片数组；
maxWidth：缩放后的最大宽度；
maxHeight：缩放后的最大高度。

5. 示例演示

下面以两个示例来演示该方法的完整实现。

示例1：等比例缩放图片并输出到页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS图片等比例缩放方法完整示例</title>
  </head>
  <body>
    <img id="my-image" src="http://example.com/image.jpg" />
    <script>
      // 获取并操作图片
      window.onload = function () {
        var imageArray = Array.from(document.images);
        scaleImage(imageArray, 300, 300);
      };

      function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
        var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        return { width: srcWidth * ratio, height: srcHeight * ratio };
      }

      function scaleImage(imageArray, maxWidth, maxHeight) {
        imageArray.forEach(function (img) {
          var newSize = calculateAspectRatioFit(
            img.naturalWidth,
            img.naturalHeight,
            maxWidth,
            maxHeight
          );
          img.width = newSize.width;
          img.height = newSize.height;
        });
      }
    </script>
  </body>
</html>

在该示例中，使用 Array.from(document.images) 获取页面中的所有图片元素，然后使用 scaleImage 方法实现等比例缩放，并输出到页面。

示例2：等比例缩放图片并输出到 canvas

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS图片等比例缩放方法完整示例</title>
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById("my-canvas");
      var ctx = canvas.getContext("2d");

      var image = new Image();
      image.onload = function () {
        var newSize = calculateAspectRatioFit(
          image.naturalWidth,
          image.naturalHeight,
          canvas.width,
          canvas.height
        );

        ctx.drawImage(image, 0, 0, newSize.width, newSize.height);
      };
      image.src = "http://example.com/image.jpg";

      function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
        var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        return { width: srcWidth * ratio, height: srcHeight * ratio };
      }
    </script>
  </body>
</html>

在该示例中，创建一个新的图片对象 image，并在程序中处理图片，通过 drawImage 方法将图片输出到 canvas 上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS图片等比例缩放方法完整示例 - Python技术站