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

សរសេរ​ដោយ៖ Lao Sopheak ៦ មិនា ២០១២ ចំណាត់​ថ្នាក់៖ រៀន 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()"/>

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

សូមសាកល្បងកែរូបភាព resize_image_1

Google+

 

ប្រភពមកពី  NTKH