How to Implement Image restriction for image is not dragable via browser URL in AngularJS?

Question

  <div class="hover-div" ng-right-click>
     <img id="myImage" class="imageSet" src="{{list.img}}" ng-click="currentImage($index)">
  </div>

//here we crate the module for the CRUD application   
 var app= angular.module("shoppingApp", []);

   app.directive('ngRightClick', function() {  
      return {  
         restrict: 'A',  
         link: function(scope, element, attr) {  
             element.bind('contextmenu', function(e) {  
                 e.preventDefault();  
             })  
         }  
     }  
  }) 


 //THIS IS JQUERY CODE FOR IMAGE IS 
  $("#myImage").mousemove( function(e) {
  return false;
 }); 
 $("#myImage").attr("draggable", false);

I have create a Ecommerce website in AngularJS technology in which i have to apply the image restriction feature like - user is not able to copy the image via drag and drop in the browser. So,how to implement this feature in our website in AngularJS ? ?

Can you just post your angular code too? – Angela Amarapala Jul 30 '17 at 06:20 — Angela Amarapala, Jul 30 '17 at 06:20

score 1 · Answer 1 · answered Jul 30 '17 at 05:17

Angular doesn't provide any functionality over vanilla JavaScript that would allow you to fully protect your images. No matter what you implement, it's impossible to prevent users from copying images. With that being said, You can do that with JavaScript by adding an event listener for the "contextmenu" event and calling the preventDefault() method:

document.addEventListener('contextmenu', event => event.preventDefault());

Source: this thread.

Angela Amarapala · Answer 2 · 2017-07-30T10:19:02.597

You cannot really disable image copying but probably you can be able to achieve it through disabling the right click option on that specific image. This can be done by angular js directives. Take a look at the code below

  var app = angular.module('myApp', []);
  app.directive('ngRightClick', function() {  
     return {  
        restrict: 'A',  
        link: function(scope, element, attr) {  
            element.bind('contextmenu', function(e) {  
                e.preventDefault();  
            })  
        }  
    }  
 })

Call this is in your div as:

  <div ng-app="myApp">
      <div ng-right-click>
          <img src="your image url" />
      </div>  
  </div>

In the above directive, when you call the ngRightClick directive in your element, it actually prevents the Right click event as it uses preventDefault(). Hope this may help!

PT: Even though you prevent the image from getting right clicked and downloaded, the user will still be able to take a screenshot of your image.

UPDATE:

This is a working example to prevent drag and drop of image using jQuery. Please check this.

    var app= angular.module("shoppingApp", []);

    app.directive('ngRightClick', function() {  
        return {  
            restrict: 'A',  
            link: function(scope, element, attr) {  
                element.bind('contextmenu', function(e) {  
                    e.preventDefault();  
                })  
            }  
        }  
     }); 


    $("#myImage").mousemove( function(e) {
     return false;
    }); 
    $("#myImage").attr("draggable", false);

            
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="app/singUpController.js"></script> 
    <script src="app/productDetailController.js"></script> 
    <script src="app/controller.js"></script>

    <div class="hover-div" ng-app="shoppingApp" ng-right-click>
        <img id="myImage"  class="imageSet" src="https://dummyimage.com/300.png/09f/fff" alt="altImg" width="300" height="300" scale="0" ng-click="currentImage($index)"/>
    </div>

Ok sir i will try and how to call (disableRightClick) directive? — Kapil Soni, Jul 30 '17 at 05:39
I have updated the answer with how to call this `ng-right-click`. But plz don't call me sir, as I'm not a guy :( — Angela Amarapala, Jul 30 '17 at 05:48
sir ng-right-click function is not call right click on the image.i have updated my code please check what's wrong in my code? — Kapil Soni, Jul 30 '17 at 06:14
Are you using the same directive name in your angular code? As it was changed from **disableRightClick** to `ngRightClick`. — Angela Amarapala, Jul 30 '17 at 06:19
Its working sir actually my directive name will be wrong that's the reason function is not call.thank you very much your infomation is really helpful for me. — Kapil Soni, Jul 30 '17 at 06:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150514/discussion-between-kapil-soni-and-angela-amarapala). — Kapil Soni, Jul 30 '17 at 06:27

How to Implement Image restriction for image is not dragable via browser URL in AngularJS?

2 Answers2