Comment implémenter la fonction de recadrage et de zoom automatique des images en JavaScript ?

Comment implémenter la fonction de recadrage et de zoom automatique des images avec JavaScript ?

Dans le développement Web, nous devons souvent nous occuper de l'affichage et de la mise en page des images. Parfois, nous souhaitons redimensionner l'image à une taille spécifiée sans modifier les proportions de l'image, et recadrer la partie appropriée pour l'afficher sur la page. JavaScript fournit un moyen pratique d'implémenter cette fonctionnalité.

Les exemples de code spécifiques sont les suivants :

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

Le code ci-dessus implémente une fonction cropAndResizeImage, qui reçoit quatre paramètres : containersId est l'ID de l'élément conteneur, imagePath est le chemin de l'image, targetWidth et targetHeight sont la taille cible. La fonction créera d'abord un élément d'image et définira la fonction de traitement après son chargement. cropAndResizeImage 函数，该函数接收四个参数：containerId 为容器元素的 ID，imagePath 为图片的路径，targetWidth 和 targetHeight 为目标尺寸。函数会先创建一个图片元素，并设置其加载完成后的处理函数。

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

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

通过调用 cropAndResizeImage

Dans la fonction de traitement, calculez le rapport qui doit être mis à l'échelle en fonction du rapport entre l'image d'origine et la taille cible, et définissez la taille et le décalage de l'image mise à l'échelle comme style d'élément. Enfin, ajoutez l'image au conteneur désigné. 🎜🎜Dans la partie CSS, nous définissons le conteneur à la taille spécifiée et masquons les parties qui sont en dehors des limites. Le style d'image définit la largeur et la hauteur maximales à 100 % pour garantir que l'image ne dépasse pas la taille du conteneur. 🎜🎜En appelant la fonction cropAndResizeImage, l'image est automatiquement recadrée, mise à l'échelle et affichée dans le conteneur spécifié. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!