کاربران می‌توانند از کد زیر برای استفاده از خصوصیات ارتفاع و عرض تصویر برای اضافه کردن قابلیت zoom in و zoom out استفاده کنند.
// 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";
در کد بالا، عرض و ارتفاع، عرض و ارتفاع فعلی تصویر هستند که ما می‌توانیم آن‌ها را در جاوااسکریپت بدست آوریم
zoom in و zoom out تصویر، یک قابلیت مهم است. با zoom in، می‌توانیم هر جزئیاتی از تصویر را مشاهده کنیم. شاید بتوانید با فشردن کلیدهای «ctrl» و «+» به صورت همزمان، در مرورگر خود زوم کنید و همه چیز را در پنجره مرورگر بزرگتر ببینید. قابلیت zoom in، برای خواندن متن‌های کوچک روی صفحه نیز مفید است. بنابراین، می‌تواند موارد کاربرد مختلفی برای zoom in و zoom out داشته باشد. در این آموزش، با استفاده از جاوااسکریپت، یاد خواهیم گرفت که چگونه تصاویر را زوم کرده و zoom out کنیم.
استفاده از خصوصیت‌های width و height برای zoom in و zoom out
جاوااسکریپت به ما اجازه می‌دهد که ابعاد تصویر را تغییر دهیم. این بدان معناست که ما می‌توانیم با استفاده از جاوااسکریپت، ارتفاع و عرض تصویر را تغییر دهیم. برای zoom in، می‌توانیم ارتفاع و عرض تصویر را افزایش داده و برای zoom out، می‌توانیم ارتفاع و عرض تصویر را کاهش دهیم.
ساختار
کاربران می‌توانند از کد زیر برای استفاده از خصوصیات ارتفاع و عرض تصویر برای اضافه کردن قابلیت zoom in و zoom out استفاده کنند.
// 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";
در کد بالا، عرض و ارتفاع، عرض و ارتفاع فعلی تصویر هستند که ما می‌توانیم آن‌ها را در جاوااسکریپت بدست آوریم.
مثال 1
در مثال زیر، ما دکمه‌های `zoom in` و `zoom out` را ایجاد کردیم. هنگامی که کاربر دکمه‌های zoom in و zoom out را فشار می‌دهد، به ترتیب توابع ZoomIn() و ZoomOut() را فراخوانی می‌کند.
در توابع ZoomIn() و ZoomOut()، ما تصویر را با استفاده از شناسه آن و ارتفاع و عرض آن با استفاده از خصوصیت‌های ClientsHeight و ClientsWidth دریافت می‌کنیم. پس از آن، ۵۰ را به ارتفاع و عرض فعلی اضافه یا کم می‌کنیم و ارتفاع و عرض جدیدی را برای تصویر تنظیم می‌کنیم.
<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://mimoc.ir/storage/articles/2024/january/16/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-Inertia-React-%D8%AF%D8%B1-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-b4cc135d4e.jpeg" 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://mimoc.ir/storage/articles/2024/january/16/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-Inertia-React-%D8%AF%D8%B1-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-b4cc135d4e.jpeg" 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
در مثال زیر، ما به رویداد keypress روی پنجره، یک event listener اضافه کردیم. هرگاه کاربران هر کلیدی را فشار دهند، رویداد فعال می‌شود و event listener، تابع callback را فراخوانی می‌کند.
در تابع event listener، ما بررسی می‌کنیم که آیا کلید فشرده شده ‘p’ است؟ اگر بله، ارتفاع و عرض تصویر را به اندازه ۱۰۰ پیکسل افزایش می‌دهیم. و اگر کاربران کلید ‘q’ را فشار دهند، ارتفاع تصویر را به اندازه ۱۰۰ پیکسل کاهش می‌دهیم.
<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://mimoc.ir/storage/articles/2024/january/16/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-Inertia-React-%D8%AF%D8%B1-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-b4cc135d4e.jpeg" 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>
در این مقاله با 3 مثال برای `zoom in` و `zoom out` تصاویر با استفاده از جاوااسکریپت آشنا شدیم. برای zoom in و zoom out، فقط کافیست عرض و ارتفاع تصویر مورد نظر را تغییر دهیم. در مثال آخر، دیدیم که چگونه می‌توانیم از رویدادهای کلیدی برای zoom in و zoom out استفاده کنیم. اگر سوالی در خصوص این مقاله داشتید حتما توی قسمت نظرات با ما در میان بگذارید.
منبع: tutorialspoint
