JavaScript 如何實(shí)現(xiàn)圖片的自動裁剪縮放功能？

在網(wǎng)頁開發(fā)中，經(jīng)常需要處理圖片的顯示和布局問題。有時候，我們希望在不改變圖片比例的情況下，將圖片縮放到指定的尺寸，并且裁剪出合適的部分顯示在頁面上。JavaScript 提供了一種方便的方式來實(shí)現(xiàn)這個功能。

具體代碼示例：

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);

在處理函數(shù)中，根據(jù)原始圖片的比例和目標(biāo)尺寸的比例，計算出應(yīng)該縮放的比例，并將縮放后的圖片大小和偏移量設(shè)置為元素樣式。最后，將圖片添加到指定的容器中。

在 CSS 部分，我們將容器設(shè)置為指定大小，并隱藏超出范圍的部分。圖片樣式設(shè)置了最大寬度和最大高度為 100%，保證了圖片不會超出容器的大小。

通過調(diào)用 cropAndResizeImage 函數(shù)，將圖片自動裁剪縮放并顯示在指定容器中。