JavaScript 如何實現圖片縮略圖功能？

2022-07-12 13:36:01 前端筆記 149

當我們在網頁中展示圖片時，有時候需要將原始的大圖進行縮小，以適應頁面的布局需求，這就需要用到圖片縮略圖功能。在 JavaScript 中，我們可以通過以下幾種方法來實現圖片的縮略圖功能：

使用 HTML 直接設置圖片的寬度和高度

最簡單的方式就是直接在 HTML 中設置圖片的寬度和高度屬性來實現縮略圖效果。例如：

<img src="image.jpg" width="200" height="150" alt="縮略圖">

這樣就會將圖片等比例縮小至寬度為200像素，高度為150像素的尺寸展示在網頁上。

使用 CSS 縮放圖片

利用 CSS 的 transform 屬性中的 scale() 方法可以實現對圖片的縮放。代碼示例：

<style>.thumbnail {    width: 200px;    height: 150px;    overflow: hidden;}.thumbnail img {    transform: scale(0.5); /* 縮放比例為50% */    transform-origin: 0 0; /* 設置縮放起點為左上角 */}</style><div class="thumbnail">    <img src="image.jpg" alt="縮略圖"></div>

這樣會將圖片縮放為原圖的50%大小，并在容器中展示，超出容器尺寸的部分將被隱藏。

使用 JavaScript 控制圖片尺寸

JavaScript 提供了操作 DOM 元素的能力，我們可以通過修改圖片元素的寬度和高度屬性來實現縮略圖功能。代碼示例：

<script>function resizeImage() {    var image = document.getElementById("image");    image.width = 200;    image.height = 150;}</script><img id="image" src="image.jpg" alt="縮略圖"><button onclick="resizeImage()">縮略圖</button>

點擊按鈕后，圖片的寬度和高度會被修改為200像素和150像素。

使用第三方庫

除了自己編寫代碼實現圖片縮略圖功能，還可以使用現成的 JavaScript 庫來簡化開發過程。例如，常用的第三方庫如 jQuery 和 Bootstrap 都提供了圖片縮略圖的功能實現。

使用 jQuery 的示例代碼：

<script src="code.jquery./jquery-3.5.1.min.js"></script><script>$(document).ready(function() {    $("#thumbnail").click(function() {        $("#image").css({            width: "200px",            height: "150px"        });    });});</script><img id="image" src="image.jpg" alt="縮略圖"><button id="thumbnail">縮略圖</button>