របៀប Resize រូបភាពជាមួយ Javascript

អត្ថបទ Javascript មួយចំនួនមុនបានបង្ហាញពីគន្លឹះនានា ដែលស្ថិតក្នុងគោលដៅ និងវិធីសាស្រ្តអនុវត្តន៍ផ្សេងៗគ្នា! អត្ថបទនេះ សំបុកអាយធីនៅតែបន្តបំពេញចិត្ត មិត្តអ្នកអាន និងជួយគាំទ្រសំបុកអាយធីបន្តទៅទៀត នោះគឺ របៀប Resize រូបភាពជាមួយ Javascript។ វិធីសាស្រ្តប្តូរទំហំរូបភាពនេះ គឺប្រើប្រាស់ Math Object ដើម្បីមកធ្វើការផ្លាស់ប្តូរ។ សូមពិនិត្យ និងអនុវត្តន៍ដូចខាងក្រោម៖
បង្ហាញកូដ

<script type=”text/javascript”>

function Resize()

{

var NewWidth = parseInt(prompt(“Enter new width:”, “”));

var NewHeight = Math.round(NewWidth * .667);

document.getElementById(“Pic”).style.width = NewWidth;

document.getElementById(“Pic”).style.height = NewHeight;

}

</script>

<img id=”Pic” src=”DSC00422.JPG” width=”225″ height=”150″/>

<input type=”button” value=”Resize” onclick=”Resize()”/>

  1. ការលោតប្រអប់ដើម្បីឲ្យអ្នកប្រើប្រាស់វាយលេខបញ្ចូលនោះគឺយើងប្រើ prompt box ដែលយើងអាច OK និង Cancel បាន (ឯ alert មានតែ OK ទេ)។
  2. ការប្រើប្រាស់ method parseInt() ចាប់យកតម្លៃដែលគេបញ្ចូលនោះ ដើម្បីបញ្ជាក់ថា វាប្រាកដជាលេខចំនួនគត់ (integer number) ។
  3. ចំណែកឯ ប្រវែងបណ្តោយរូបភាព (width) ត្រូវគុណនឹង .667 (តាមរូបភាព) ដើម្បីឲ្យវាមានខ្នាតសមាមាត្រជាមួយនឹង កំពស់រូបភាព (height) កុំឲ្យខូចទ្រង់ទ្រាយរូប
  4. ហើយនឹង Method Math.round() គឺប្រើដើម្បីបម្លែងកំពស់រូបទៅជាចំនួនគត់ ។ តម្លៃប្រវែងបណ្តោយ និងកំពស់ ថ្មីនេះត្រូវបានកំណត់ចូលទៅក្នុង style properties នៃរូបភាពនោះ។