Bagaimana untuk melaksanakan pemangkasan automatik dan penskalaan imej dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk melaksanakan pemangkasan automatik dan penskalaan imej dalam JavaScript?

王林

Lepaskan： 2023-10-25 09:06:19

asal

1377 orang telah melayarinya

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

JavaScript Bagaimana untuk melaksanakan fungsi pemangkasan dan zum automatik imej?

Dalam pembangunan web, kita selalunya perlu berurusan dengan paparan dan susun atur imej. Kadangkala, kami ingin menskalakan imej kepada saiz yang ditentukan tanpa mengubah perkadaran imej dan memangkas bahagian yang sesuai untuk dipaparkan pada halaman. JavaScript menyediakan cara yang mudah untuk melaksanakan fungsi ini.

Contoh kod khusus adalah seperti berikut:

HTML:

<div id="image-container">
  <img id="image" src="path/to/image.jpg" alt="Image">
</div>

Salin selepas log masuk

CSS:

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

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

Salin selepas log masuk

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

Salin selepas log masuk

Kod di atas melaksanakan fungsi cropAndResizeImage, yang menerima empat parameter containerId ialah ID elemen kontena, imagePath ialah laluan imej, targetWidth dan targetHeight ialah saiz sasaran. Fungsi pertama akan mencipta elemen imej dan menetapkan fungsi pemprosesan selepas ia dimuatkan. cropAndResizeImage 函数，该函数接收四个参数：containerId 为容器元素的 ID，imagePath 为图片的路径，targetWidth 和 targetHeight 为目标尺寸。函数会先创建一个图片元素，并设置其加载完成后的处理函数。

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

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

通过调用 cropAndResizeImage

Dalam fungsi pemprosesan, kira nisbah yang perlu diskalakan berdasarkan nisbah imej asal dan saiz sasaran, dan tetapkan saiz imej berskala dan diimbangi sebagai gaya elemen. Akhir sekali, tambahkan imej pada bekas yang ditetapkan. 🎜🎜Dalam bahagian CSS, kami menetapkan bekas kepada saiz yang ditentukan dan menyembunyikan bahagian yang keluar dari had. Gaya imej menetapkan lebar maksimum dan ketinggian maksimum kepada 100% untuk memastikan imej tidak melebihi saiz bekas. 🎜🎜Dengan memanggil fungsi cropAndResizeImage, imej dipangkas, diskalakan dan dipaparkan secara automatik dalam bekas yang ditentukan. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemangkasan automatik dan penskalaan imej dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!