画像の自動トリミングとズーム機能をJavaScriptで実装するにはどうすればよいですか?

JavaScript 画像の自動トリミングとズーム機能を実装するにはどうすればよいですか?

Web 開発では、多くの場合、画像の表示とレイアウトを処理する必要があります。場合によっては、画像の比率を変更せずに画像を指定したサイズに拡大縮小し、ページ上に表示する適切な部分を切り取りたいことがあります。 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 はターゲット サイズです。この関数は最初に画像要素を作成し、それが読み込まれた後に処理関数を設定します。

処理関数では、元の画像とターゲットのサイズの比率に基づいて拡大縮小する割合を計算し、拡大縮小後の画像のサイズとオフセットを要素スタイルとして設定します。最後に、指定したコンテナに画像を追加します。

CSS セクションでは、コンテナーを指定したサイズに設定し、境界外の部分を非表示にします。画像スタイルは、画像がコンテナのサイズを超えないようにするために、最大幅と最大高さを 100% に設定します。

cropAndResizeImage 関数を呼び出すと、画像が自動的に切り取られ、拡大縮小されて、指定されたコンテナーに表示されます。

以上が画像の自動トリミングとズーム機能をJavaScriptで実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。