极客笔记如何使用JavaScript缩放和放大图像
缩放和放大图像是一个非常重要的功能。通过缩放，我们可以看到图像的每一个细节。也许你可以按下”ctrl”和”+”键来放大你的浏览器，这样你就可以在浏览器窗口中看到更大的内容。
缩放功能还可以用于屏幕上的小文字阅读。因此，缩放具有各种用途。在本教程中，我们将学习如何使用JavaScript缩放和放大图像。
使用height和width属性进行缩放和放大
JavaScript允许我们改变图像的尺寸。这意味着我们可以使用JavaScript来改变图像的高度和宽度。要缩放，我们可以增加图像的高度和宽度，要放大，我们可以减小图像的高度和宽度。
语法
用户可以按照以下语法使用图像的height和width属性来添加缩放和放大功能。
// 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://www.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://www.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’，如果是，我们将图像的高度和宽度增加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://www.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放大和缩小图像的示例。要放大和缩小，我们只需要改变目标图像的宽度和高度。在最后一个示例中，我们看到了如何使用按键事件放大和缩小。