ចែក​រំលែក​គំនិត​ និង​ចំណេះដឹង​ជាមួយគ្នា

ការពារ​រូប​ភាព​របស់អ្នក

Posted in ពត៌មាន by ប្រាក់ សុភី on ខែកក្កដា 23, 2010

ប្រសិន​បើ​អ្នក​មិន​ចង់​អោយ​នរណា​ម្នាក់ យក​រូប​នៅ​លើ​វែបសាយ​​ដោយ​គ្មាន​ការអនុញ្ញាតនោះ អញ្ជឹង​​ Plugin របស់ jQuery ខាងក្រោម​នេះ​គឺ​អាច​​ជួយ​បាន។​ វា​មាន​នាទី​​​ការពារ​រូបភាព​ នៅ​ពេល​អ្នក​ប្រើ​បើក​មើល​វែបសាយ​​របស់យើង​ ហើយមាន​បំណង់ចង់​ save រូបភាពនោះទុក គឺមិន​អនុញ្ញាត​នោះទេ។ សូម​សាកល្បង save និង view រូបភាព​នៅក្នុង Demo នេះ​អ្នកនិង​ទទួលបាន​រូបភាព blank.gif​។ កូដដើមនៅទីនេះ តែវា​ដំណើរការ​តែជាមួយ jQuery 1.2.6 ហើយ​កូដ​ខាងក្រោមនេះ​ខ្ញុំ​បាន​ធ្វើទំនើបកម្ម​អោយ​វាដំណើរការ​ជាមួយ jQuery 1.4.2 ដែល​ជាកំណែរប្រែ​បច្ចុប្បន្ន។


jQuery.fn.protectImage = function(settings) {
 settings = jQuery.extend({
 image: 'img/blank.gif',
 zIndex: 10
 }, settings);
 return this.each(function() {
 var position = $(this).offset();
 var height = $(this).height();
 var width = $(this).width();
 $('<img />').attr({
 width: width,
 height: height,
 src: settings.image
 }).css({
 border: '1px solid #f00',
 top: position.top,
 left: position.left,
 position: 'absolute',
 zIndex: settings.zIndex
 }).appendTo('body')
 });
};

Parameters ដែល​សំខាន់ពីរគឺ  zIndex និង image ដែល​អ្នក​ត្រូវ​យក​ចិត្ត​ទុកដាក់ zIndex ជាទីតាំងដែល​រូបយើង​ត្រូវ​ជំនួយ​គឺនៅខាងលើរូបភាពពិត​ដែល​មើល​ឃើញ រូបភាពដែល​យើង​ប្រើនោះគឺ blank.gif។ កូដ​ខាង​លើ​ខ្ញុំ​ដាក់ border ពណ៌ក្រហម​អោយ​ទៅ​រូប​ភាព​ដែល​ការពារ អ្នក​លុប​វា​ចេញ​បាន​។

ខាងក្រោម​នេះជាកូដ javascript ដែល​យើង​ត្រូវ​បញ្ចូលទៅ​ក្នុង HTML


$(window).bind('load', function() {
 $('img.protect').protectImage();
 });

កូដខាង​លើវានឹង​ដំណើរការ​ពេល​ដែល​ Page ដំណើរការ​រួច​រាល់។ បញ្ជាក់​ចំពោះកូដនេះ​គឺវានឹង​ការពារ​រួបណាដែល​ប្រើ​ class protect របស់​ CSS។ ប្រសិនបើចង់​អោយ​វា​ការ​ពារ​រួបភាពទាំងអស់គឺយើត្រូវលុប class protect នោះចេញបានហើយ  $(‘img’).protectImage(); អញ្ចឹង​វានឹង​ការពារ​រាល់រួបភាពទាំងអស់នៅលើទំព័រវែបរបស់អ្នក។

  1. Demo
  2. Download Source Code
Advertisements

11 ចំលើយ

Subscribe to comments with RSS.

  1. ភារម្យ said, on ខែកក្កដា 23, 2010 at 6:03 ល្ងាច

    ឡូយតាបង! System ញ៉ុមរាល់ថ្ងៃក៏ប្រើ Jquery ដែរ! ពេលណាចង់អីមួយបន្ថែម ដើររក Addon ហើយ!!!!!

    • kooms said, on ខែកក្កដា 23, 2010 at 6:08 ល្ងាច

      មែន​ហើយ jQuery គឺ Javacript framework ដែល​ពេញនិយម​បំផុត​សម្រាប់ Web Developer

  2. rony said, on ខែកក្កដា 23, 2010 at 8:24 ល្ងាច

    Oh great that one i need.
    Thank for ur post.
    hope that u will post more
    thanks again

  3. ហនុមាន said, on ខែកក្កដា 23, 2010 at 8:27 ល្ងាច

    អរគុណ ! ប្រហែលពិបាកសំរាប់ពួកអ្នកប្រើ PC តែចំពោះអ្នកប្រើ MacOS ស្រួល គ្រាន់តែប្រើ Screen Capture យកបានដូចតែគ្នាហ្នឹង ! តែទោះជាយ៉ាងណា​ក៏សូមអរគុណដែរ !

  4. បាត់ដំបង said, on ខែកក្កដា 23, 2010 at 11:33 ល្ងាច

    jquery ហ្នឹង ដេកក៏យល់សប្តិដែរ។ ព្រោះតែធ្វការជាមួយវារាល់ថ្ងៃពេក។ អរគុណបងដែលបានចែករំលែក

  5. achharia said, on ខែកក្កដា 24, 2010 at 1:23 ព្រឹក

    .
    សំរាប់អ្នកដែលមិនចេះភាសាកូដ អេចធីអិមអិល(HTML) ច្បាស់ជាចម្លងយករូបនោះ
    មិនបានមែន ហើយបើបានគឺបានតែរូបថ្លាឬទទេ(blank.gif)ដែលនៅត្រួតពីលើរូបនោះ
    ដូចរូបនានានៅតាមវែបសៃថ៍ http://www.flickr.com​ ទាំងនោះដែរ។
    មានល្បិចមួយដែលអាចចម្លងយករូបអស់នោះបានគឺ អូសម៉ៅស៍ទៅម៉ាកកេលើរូបនោះ
    រួចចុចគន្លិះម៉ៅស៍ខាងស្ដាំហើយចុចយកអោយវាបង្ហាញកូដHTML គេនឹងឃើញ URL នៃរូបនោះ
    នៅលើគោក ដែលអាចឃើញជា absolute ឬ relative address ។ ដូចរូបក្នុង Demo
    ខាងលើនេះ មើលតាមកូដគេឃើញវានៅជា relative address គឺ img/kuril_islands_en.jpg


    ដូច្នោះ គ្រាន់តែចម្លងយកត្រឹម
    img/kuril_islands_en.jpg ទៅដាក់បន្តពី http://bayon.web.fc2.com/protect_image/
    នឹងបានជា absolute address ដូចខាងក្រោម

    ចុចមើលរូបភ្លែត ចម្លងយកបានភ្លាមតាមចិត្ត ។
    …..នេះបើតាមបទពិសោធរបស់ខ្ញុំ​ ដើម្បីចម្លងយករូបពីខាង flickr ដោយមិនបាច់ប្រើ
    Screen capture ក៏បាន ។
    នេះគ្រាន់តែជាកូន ល្បិចទល់ល្បិច មួយតូចប៉ុណ្ណោះ ។

    តែទោះជាយ៉ាងណា​ក៏សូមអរគុណចំពោះការរំលែកចំណេះគ្នានេះដែរ !

    .

  6. រដ្ដា said, on ខែកក្កដា 24, 2010 at 3:46 ព្រឹក

    I still able save your picture with right click and save images as. You just have to change your browse size so that the protected area slide to the side. The code still need some improvement.

  7. nimol said, on ខែកក្កដា 24, 2010 at 9:27 ព្រឹក

    ** ដូច​អត់​មាន​ប្រសិទ្ធភាព​ទេ​បង! ខ្ញុំ​ចូល File => Save Page As (Firefox) អាច​ទាញ​បាន​រូប​ទាំង​មូល។

  8. nimol said, on ខែកក្កដា 24, 2010 at 9:31 ព្រឹក

    ឬ ក៏​ចូល​ View Source យើង​អាច​ដឹង​ថា​រូប​ហ្នឹង​នៅ​ទីតាំង​ណា http://bayon.web.fc2.com/protect_image/img/kuril_islands_en.jpg

  9. វិចិត្រ said, on ខែកក្កដា 24, 2010 at 2:14 ល្ងាច

    ក្នុង FireFox, ចូល​ទៅ Tools , Page Information, Media រួច​ចុច​លើ​រូបភាព បន្ទាប់​មក​យក Save As ..
    សូម្បី​តែ​រូបក្នុង Flickr ក៏​កួពី​បាន​ដែរ។

    😀

  10. kooms said, on ខែកក្កដា 26, 2010 at 8:44 ព្រឹក

    សួស្ដី​អ្នក​រាល់​អគុណ​ណាស់​ដែល​ចាប់​អារម្មណ៍​ អត្ថបទ​នេះ។ ជា​ការ​ពិត​ណាស់​វា​គ្រាន់​តែ​ជា​បច្ចេកទេស​មួយ​តែប៉ុណ្ណោះ ទោះជា​ធ្វើ​យ៉ាង​​ណា​ក៏​យើង​មិន​អាច​ការពារ​បាន​មួយ​រយ​ភាគ​រយ​ដែរ។ បើ​យើង​មិន​ចង់​អោយ​គេ​យក​គឺ​មិនបាច់​ដាក់​ជាការស្រេច :lo​l: ។ ហើយ​កូដ​ខាង​លើ​គឺ​សម្រាប់​តែ​ការពារ​អ្នក​ដែល​ចុច​កណ្ដុរ​ខាងស្ដាំ​ Save និង View វា​តែ​ប៉ុណ្ណោះ គឺ​វាស្រដៀងនឹង​ flickr ដែរ។ តែ​ទោះ​​ជា​យ៉ាង​ណា​នៅ​តែ​មិន​អាច​ការពារ​រួប​យើង​បាន​ដដែល​នឹង វិធី​យក​​រូប​ភាព​បែប​នេះ​​​ងាយ​ហើយ​​​សមញ្ញា​នោះ​គឺ​ធ្វើ​ដូច បង​ហនុមាន​ទៅ គឺ​ Print Screen 😆 ទោះ​ជា​បច្ចេកទេស​យ៉ាង​ណា​ក៏​នៅតែ​យក​បាន​ដែរ។​


ឆ្លើយ​តប

Fill in your details below or click an icon to log in:

ឡូហ្កូ WordPress.com

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី WordPress.com របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូប Twitter

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Twitter របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូបថត Facebook

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Facebook របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

Google+ photo

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Google+ របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

កំពុង​ភ្ជាប់​ទៅ​កាន់ %s

%d bloggers like this: