資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 縮放影像？
放大和縮小是影像的重要功能。透過放大，我們可以看到影像的每一個細節。也許，你可以同時按下“ctrl”和“+”鍵來放大瀏覽器，你會發現瀏覽器視窗中的所有內容都變大了。
放大功能也有助於閱讀螢幕上的小文字。因此，放大和縮小的用例多種多樣。在本教程中，我們將學習如何使用 JavaScript 放大和縮小影像。
使用高度和寬度屬性進行放大和縮小
JavaScript 允許我們更改影像的尺寸。這意味著我們可以使用 JavaScript 更改影像的高度和寬度。要放大，我們可以增加影像的高度和寬度，要縮小，我們可以減少影像的高度和寬度。
語法
使用者可以按照以下語法使用影像的高度和寬度屬性來新增放大和縮小功能。
// Zoom In image.style.width = (width + 50) + "px"; image.style.height = (height + 50) + "px"; // zoom out image.style.width = (width - 50) + "px"; image.style.height = (height - 50) + "px";
在以上語法中，width 和 height 是影像的當前寬度和高度，我們可以在 JavaScript 中獲取。
示例 1
在下面的示例中，我們建立了放大和縮小按鈕。當用戶按下放大和縮小按鈕時，分別呼叫 ZoomIn() 和 ZoomOut() 函式。
在 ZoomIn() 和 ZoomOut() 函式中，我們使用其 id 獲取影像，並使用 ClientsHeight 和 ClientsWidth 屬性獲取高度和寬度。之後，我們在當前高度和寬度上新增或刪除 50，併為影像設定新的高度和寬度。
<html>
<body>
<h3>Using the <i> height and width property </i> of images to add zoom in and zoom out features in images using JavaScript </h3>
<img src ="https://tutorialspoint.tw/images/trending_categories.svg" height = "500px" width = "500px" alt = "sample image" id = "image"> <br> <br>
<button onclick = "ZoomIn()"> Zoom IN </button>
<button onclick = "ZoomOut()"> Zoom Out </button>
<script>
let image = document.getElementById('image');
function ZoomIn() {
let width = image.clientWidth;
let height = image.clientHeight;
image.style.width = (width + 50) + "px";
image.style.height = (height + 50) + "px";
}
function ZoomOut() {
let width = image.clientWidth;
let height = image.clientHeight;
image.style.width = (width - 50) + "px";
image.style.height = (height - 50) + "px";
}
</script>
</body>
</html>
示例 2
在此示例中，我們獲取使用者輸入以設定影像的新寬度和高度。我們從使用者那裡獲取數字輸入，並將該數字畫素設定為影像的高度和寬度。因此，使用者可以設定影像的自定義高度和寬度。
<html>
<body>
<h3>Allowing users to set custom <i> height and width property </i> of images to add zoom in and zoom out features in images using JavaScript</h3>
<img src ="https://tutorialspoint.tw/images/trending_categories.svg" height = "300px" width = "300px" alt = "sample image" id = "image"> <br> <br>
<button onclick = "ZoomInOROut()"> Zoom IN or Out </button>
<script>
let image = document.getElementById('image');
function ZoomInOROut() {
let width = prompt("Enter the new width of the image ", 500);
let height = prompt("Enter the new height of the image", 500);
image.style.width = width + "px";
image.style.height = height + "px";
}
</script>
</body>
</html>
示例 3
在下面的示例中，我們為視窗上的按鍵事件添加了事件監聽器。每當使用者按下任何鍵時，該事件都會觸發，並且事件監聽器將呼叫回撥函式。
在事件監聽器函式中，我們檢查按下的鍵是否為“p”，如果為“p”，則將影像的高度和寬度增加 100px，如果使用者按下“q”鍵，則將影像的高度減少 100px。
<html>
<body>
<h3>Allowing users to set custom <i> height and width property </i> of images to add zoom in and zoom out features in images using JavaScript</h3>
<h4>Press p for zoom in and q for zoom out </h4>
<img src = "https://tutorialspoint.tw/images/trending_categories.svg" height = "300px" width = "300px" alt = "sample image" id = "image"> <br> <br>
<script>
let image = document.getElementById('image');
// add keypress event listener on window
window.addEventListener('keypress', (event) => {
// get the width and height of the image
let width = image.clientWidth;
let height = image.clientHeight;
// when the user presses the 'p' key, zoom in
if (event.key == 'p') {
image.style.width = (width + 100) + "px";
image.style.height = (height + 100) + "px";
}
// zoom out when the user presses the q key
if (event.key == "q") {
image.style.width = (width - 100) + "px";
image.style.height = (height - 100) + "px";
}
})
</script>
</body>
</html>
我們已經看到了三個使用 JavaScript 放大和縮小影像的示例。要放大和縮小，我們只需要更改目標影像的寬度和高度。在最後一個示例中，我們看到了如何使用按鍵事件進行放大和縮小。
9K+ 瀏覽量
