数据结构
网络
关系型数据库管理系统
操作系统
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.com/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.com/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.com/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+ 浏览量
