如何實現圖像的圖像限制不能通過瀏覽器URL在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 \t \t 
 
\t var app= angular.module("shoppingApp", []); 
 

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

 

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

我創造AngularJS技術的電子商務網站中，我也要用圖像限制功能類似 - 用戶無法將圖像通過拖放複製在瀏覽器。那麼，如何在我們的AngularJS網站中實現這個功能呢？ ？

Answer 1

Angular不提供超過vanilla JavaScript的任何功能，這將允許您完全保護您的圖像。無論你實施什麼，都不可能阻止用戶複製圖像。有了這樣說，你可以做到這一點與JavaScript的加入，爲「文本菜單」事件的事件監聽器，並調用preventDefault()方法：

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

Source: this thread.

Answer 2

你不能真正禁止圖像複製，但可能您可以通過在該特定圖像上禁用右鍵單擊選項來實現。這可以通過角度js指令完成。看看下面的代碼

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

呼叫這是您的div爲：

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

在上面指令，當你調用ngRightClick指令在你的元素，它實際上防止右鍵單擊事件，因爲它使用preventDefault()。希望這可能有幫助！

PT：即使您阻止圖像被右鍵單擊並下載，用戶仍然可以拍攝圖像的屏幕截圖。

UPDATE：

這是一個工作示例，以防止拖和使用jQuery圖像的下降。請檢查這個。

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) { 
 
\t  return false; 
 
    }); 
 
    $("#myImage").attr("draggable", false); \t

   
 
     <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>