JavaScript 如何实现图片的自动裁剪缩放功能？-js教程-PHP中文网

JavaScript 如何实现图片的自动裁剪缩放功能？

王林

发布： 2023-10-25 09:06:19

原创

2109人浏览过

javascript 如何实现图片的自动裁剪缩放功能？

JavaScript 如何实现图片的自动裁剪缩放功能？

在网页开发中，经常需要处理图片的显示和布局问题。有时候，我们希望在不改变图片比例的情况下，将图片缩放到指定的尺寸，并且裁剪出合适的部分显示在页面上。JavaScript 提供了一种方便的方式来实现这个功能。

具体代码示例如下：

HTML：

立即学习“Java免费学习笔记（深入）”；

<div id="image-container">
  @@##@@
</div>

登录后复制

CSS：

#image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

#image {
  max-width: 100%;
  max-height: 100%;
}

登录后复制

JavaScript：

function cropAndResizeImage(containerId, imagePath, targetWidth, targetHeight) {
  var container = document.getElementById(containerId);
  var image = document.createElement('img');

  image.onload = function() {
    var sourceWidth = this.width;
    var sourceHeight = this.height;
    var sourceRatio = sourceWidth / sourceHeight;
    var targetRatio = targetWidth / targetHeight;
    var scaleRatio;

    if (sourceRatio > targetRatio) {
      scaleRatio = targetHeight / sourceHeight;
    } else {
      scaleRatio = targetWidth / sourceWidth;
    }

    var scaledWidth = sourceWidth * scaleRatio;
    var scaledHeight = sourceHeight * scaleRatio;
    var offsetX = (scaledWidth - targetWidth) / 2;
    var offsetY = (scaledHeight - targetHeight) / 2;

    image.style.width = scaledWidth + 'px';
    image.style.height = scaledHeight + 'px';
    image.style.marginLeft = -offsetX + 'px';
    image.style.marginTop = -offsetY + 'px';
    image.style.visibility = 'visible';
  };

  image.src = imagePath;
  image.style.visibility = 'hidden';
  container.appendChild(image);
}

// 使用示例
cropAndResizeImage('image-container', 'path/to/image.jpg', 300, 200);

登录后复制

以上代码实现了一个 cropAndResizeImage 函数，该函数接收四个参数：containerId 为容器元素的 ID，imagePath 为图片的路径，targetWidth 和 targetHeight 为目标尺寸。函数会先创建一个图片元素，并设置其加载完成后的处理函数。

在处理函数中，根据原始图片的比例和目标尺寸的比例，计算出应该缩放的比例，并将缩放后的图片大小和偏移量设置为元素样式。最后，将图片添加到指定的容器中。

在 CSS 部分，我们将容器设置为指定大小，并隐藏超出范围的部分。图片样式设置了最大宽度和最大高度为 100%，保证了图片不会超出容器的大小。

通过调用 cropAndResizeImage 函数，将图片自动裁剪缩放并显示在指定容器中。