JavaScript에서 이미지 자동 자르기 및 크기 조정을 구현하는 방법은 무엇입니까?

JavaScript로 이미지 자동 자르기 및 확대/축소 기능을 구현하는 방법은 무엇입니까?

웹 개발에서는 이미지의 표시와 레이아웃을 처리해야 하는 경우가 많습니다. 때로는 이미지의 비율을 변경하지 않고 이미지를 지정된 크기로 조정하고 페이지에 표시할 적절한 부분을 자르고 싶을 때가 있습니다. JavaScript는 이 기능을 구현하는 편리한 방법을 제공합니다.

구체적인 코드 예는 다음과 같습니다.

HTML:

<div id="image-container">
  <img id="image" src="path/to/image.jpg" alt="Image">
</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 함수를 구현하며, 이 함수는 4개의 매개변수를 받습니다: ContainerId 는 컨테이너 요소의 ID이고, imagePath는 이미지의 경로이며, targetWidth 및 targetHeight는 대상 크기입니다. 이 함수는 먼저 이미지 요소를 생성하고 로드된 후 처리 기능을 설정합니다. cropAndResizeImage 函数，该函数接收四个参数：containerId 为容器元素的 ID，imagePath 为图片的路径，targetWidth 和 targetHeight 为目标尺寸。函数会先创建一个图片元素，并设置其加载完成后的处理函数。

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

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

通过调用 cropAndResizeImage

처리 기능에서 원본 이미지와 대상 크기의 비율을 기준으로 비율을 계산하고, 비율이 조정된 이미지 크기와 오프셋을 요소 스타일로 설정합니다. 마지막으로 지정된 컨테이너에 이미지를 추가합니다. 🎜🎜CSS 부분에서는 컨테이너를 지정된 크기로 설정하고 범위를 벗어나는 부분을 숨겼습니다. 이미지 스타일은 이미지가 컨테이너 크기를 초과하지 않도록 최대 너비와 최대 높이를 100%로 설정합니다. 🎜🎜cropAndResizeImage 함수를 호출하면 이미지가 자동으로 자르고 크기가 조정되어 지정된 컨테이너에 표시됩니다. 🎜

위 내용은 JavaScript에서 이미지 자동 자르기 및 크기 조정을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!