آموزش zoom in و zoom out تصاویر در جاوا اسکریپت

آموزش zoom in و zoom out تصاویر در جاوا اسکریپت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) + &quotpx" image.style.height = (height + 50) + &quotpx" // zoom out image.style.width = (width - 50) + &quotpx" image.style.height = (height - 50) + &quotpx"در کد بالا، عرض و ارتفاع، عرض و ارتفاع فعلی تصویر هستند که ما می‌توانیم آن‌ها را در جاوااسکریپت بدست آوریم.مثال 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 =&quothttps://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&quot height = &quot500px&quot width = &quot500px&quot alt = &quotsample image&quot id = &quotimage&quot> <br> <br> <button = &quotZoomIn()&quot> Zoom IN </button> <button = &quotZoomOut()&quot> Zoom Out </button> let image = document.getElementById('image'); function ZoomIn() { let width = image.clientWidth; let height = image.clientHeight; image.style.width = (width + 50) + &quotpx" image.style.height = (height + 50) + &quotpx" } function ZoomOut() { let width = image.clientWidth; let height = image.clientHeight; image.style.width = (width - 50) + &quotpx" image.style.height = (height - 50) + &quotpx" } </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 =&quothttps://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&quot height = &quot300px&quot width = &quot300px&quot alt = &quotsample image&quot id = &quotimage&quot> <br> <br> <button = &quotZoomInOROut()&quot> Zoom IN or Out </button> let image = document.getElementById('image'); function ZoomInOROut() { let width = prompt(&quotEnter the new width of the image &quot, 500); let height = prompt(&quotEnter the new height of the image&quot, 500); image.style.width = width + &quotpx" image.style.height = height + &quotpx" } </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 = &quothttps://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&quot height = &quot300px&quot width = &quot300px&quot alt = &quotsample image&quot id = &quotimage&quot> <br> <br> 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) + &quotpx" image.style.height = (height + 100) + &quotpx" } // zoom out when the user presses the q key if (event.key == &quotq&quot) { image.style.width = (width - 100) + &quotpx" image.style.height = (height - 100) + &quotpx" } }) </body> </html>در این مقاله با 3 مثال برای `zoom in` و `zoom out` تصاویر با استفاده از جاوااسکریپت آشنا شدیم. برای zoom in و zoom out، فقط کافیست عرض و ارتفاع تصویر مورد نظر را تغییر دهیم. در مثال آخر، دیدیم که چگونه می‌توانیم از رویدادهای کلیدی برای zoom in و zoom out استفاده کنیم. اگر سوالی در خصوص این مقاله داشتید حتما توی قسمت نظرات با ما در میان بگذارید.منبع: وبسایت میموک