Wie zoomen Bild mit angularJS

Question

Wie kann ich das Bild zoomen, wenn ich auf das Bild selbst mit angularJS klicken. Ich kann es nicht tun, wenn ich diese Website verwende: https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation. Jeder kann helfen?

Meine js-Datei:

var camListApp = angular.module('camListApp', ['ui.bootstrap']) 

camListApp.filter('unique', function() { 
    return function(input, key) { 
     var unique = {}; 
     var uniqueList = []; 
     for(var i = 0; i < input.length; i++){ 
      if(typeof unique[input[i][key]] == "undefined"){ 
       unique[input[i][key]] = ""; 
       uniqueList.push(input[i]); 
      } 
     } 
     return uniqueList; 
    }; 
}); 
camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){ 

$scope.custom = true; 
$scope.toggleCustom = function(url) { 
    $scope.custom = ! $scope.custom; 
    $scope.imageView = url; 

}; 



$http.get('http://localhost:8082/camera/list').then(function(response) { 
    console.log(response); 
     $scope.records= response.data; 
    }); 
}]); 

Meine HTML-Datei:

<div ng-controller="Hello" class="col-xs-12"> 


<b>Search:</b><br> 

<input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid for state in records | filter:searchBox | limitTo:8 | unique:'cameraid'"> 


<br> 
<br> 
<br> 
<br> 
<table border = 1 class="table table-striped table-hover" style="width:45%"> 
    <thead> 
     <tr> 

     <th><center>CamID</th></center> 
     <th><center>Timestamp</th></center> 
     <th><center>View Image</center></th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'"> 

     <td>{{record.cameraid}}</td> 
     <td>{{record.timestamp}}</td> 
     <td><center> <button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()">View</center></button></td> 
     </tr> 


    </tbody> 
    </table> 

    <span id="myDIV" ng-hide="custom"> 
    <img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400"> 
    </span> 

    <!--<span ng-hide="custom">To: 
     <input type="text" id="to" /> 
    </span>--> 
    <span ng-show="custom"></span> 
</div> 
<script> 
function myFunction() { 
document.getElementById("myDIV").style.position = "absolute"; 
} 
</script> 


</body> 
</html> 

Answer 1

Erstellt ng-Klick auf das Bild

HTML

<span id="myDIV" ng-hide="custom"> 
    <img id="view" ng-src="http://www.w3schools.com/css/{{imageView}}" width="300" height="300" ng-click="zoom()"> 
    </span> 

JS

$scope.zoom = function() { 
    var imageId = document.getElementById('view'); 
    if(imageId.style.width == "400px"){ 
    imageId.style.width = "300px"; 
    imageId.style.height = "300px"; 
    }else{ 
    imageId.style.width = "400px"; 
    imageId.style.height = "400px"; 
    } 

Codepen- http://codepen.io/nagasai/pen/jrMzER

Answer 2

meine einfache Richtlinie die Bildverkleinerung und Bildbewegung zu erhöhen. Ich hoffe, es wird dir nützlich sein.

(function() { 
     angular 
      .module('app') 
      .directive('zoom', [function() { 
       return { 
        restrict: 'A', 
        link: function (scope, elem, attrs) { 
         var img = elem[0]; 
         $(img).css({ 
          "position": "absolute", 
          "top": "0", 
          "bottom": "0", 
          "left": "0", 
          "right": "0", 
          "margin": "auto", 
          "padding-left": "1px", 
          "padding-right": "1px", 
          "padding-top": "1px", 
          "padding-bottom": "1px", 
          "-webkit - user - select": "none", 
          "-webkit - user - drag": "none" 
         }); 
         var imageContainer = img.parentNode.parentNode; 
         $(imageContainer).css({ 
          "text-align": "center", 
          "margin": "0", 
          "padding": "0", 
          "height": "100%", 
          "max- height": "100%", 
          "width": "100%", 
          "background-color": "#000", 
          "overflow": "hidden", 
          "-webkit - user - select": "none", 
          "cursor": "context - menu", 
         }); 
         var parent = img.parentNode; 
         $(parent).css({ 
          "width": "100%", 
          "height": "auto", 
          "margin": 0, 
          "padding": 0, 
          "display": "-webkit - box", 
          "-webkit - box - pack": "center", 
          "-webkit - box - align": "center", 
          "z-index": "5" 
         }); 
         var currentScale = 1; 
         var currentRotation = 90 
         let transformOriginX = 0, transformOriginY = 0; 
         let translateX = 0, translateY = 0; 
         function setTransformOrigin() { 
          let imgRect = img.getBoundingClientRect(); 
          let parentRect = parent.getBoundingClientRect(); 
          let visibleWidth = (imgRect.width > parent.offsetWidth) ? imgRect.left + parentRect.width : imgRect.width; 
          let visibleHeight = (imgRect.height > parent.offsetHeight) ? imgRect.top + parentRect.height : imgRect.height; 
          let beginX = parentRect.right - visibleWidth, beginY = parentRect.bottom - visibleHeight; 
          let endX = beginX + visibleWidth, endY = beginY + visibleHeight; 
          let midX = beginX + ((endX - beginX)/2), midY = beginY + ((endY - beginY)/2); 
          // if (midY > imageContainer.clientHeight/2) midY = imageContainer.clientHeight/2; 
          //if (midX > imageContainer.clientWidth/2) midX = imageContainer.clientWidth/2; 
          if (midY > imageContainer.clientHeight/2) { parent.style.transformOrigin = midX + 'px ' + midY + 'px' } else { 
           parent.style.transformOrigin = midX + 'px ' + imageContainer.clientHeight/2 + 'px' 
          } 
         } 
         function scaleImage(scale, event) { 

          img.style.transform = 'scale(' + scale + ') ' + 'rotate(' + (currentRotation - 90) + 'deg)'; 
          if (scale < currentScale) { 
           let imgRect = img.getBoundingClientRect(); 
           let imageContainerRect = imageContainer.getBoundingClientRect(); 
           if (parent.style.transform.match('translate')) { 
            let parentTransform = parent.style.transform.replace('translate(', '').replace(')', '').split(', '); 
            let moveX = parentTransform[0].replace('px', ''), moveY = parentTransform[1].replace('px', ''); 
            if ((imageContainerRect.right - imgRect.right) > 0 || (imageContainerRect.left - imgRect.left) < 0) { 
             let moveBy = ((imageContainerRect.right - imgRect.right) > 0) ? (imageContainerRect.right - imgRect.right) : (imageContainerRect.left - imgRect.left); 
             moveX = (imgRect.width > parent.offsetWidth) ? (parseFloat(parentTransform[0]) + moveBy) : 0; 
             transformOriginX = (transformOriginX - moveBy); 
            } 
            if ((imageContainerRect.bottom - imgRect.bottom) > 0 || (imageContainerRect.top - imgRect.top) < 0) { 
             let moveBy = ((imageContainerRect.bottom - imgRect.bottom) > 0) ? (imageContainerRect.bottom - imgRect.bottom) : (imageContainerRect.top - imgRect.top); 
             moveY = (imgRect.height > parent.offsetHeight) ? (parseFloat(parentTransform[1]) + moveBy) : 0; 
             transformOriginY = (transformOriginY + moveBy); 
            } 
            if (scale <= 1) { translateX = 0; translateY = 0; } 
            parent.style.transformOrigin = transformOriginX + 'px ' + transformOriginY + 'px'; 
           } 
          } 
          currentScale = scale; 
          let imgRect = img.getBoundingClientRect(); 
          let parentRect = parent.getBoundingClientRect(); 
          let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false); 
          let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false); 
          let startX = event.pageX - translateX, startY = event.pageY - translateY; 
          let max_left = parentRect.left - imgRect.left; 
          let max_top = parentRect.top - imgRect.top; 
          var evt = window.event; 
          translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX)); 
          translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY)); 
          translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0; 
          if ((translateX != 0) && (translateY != 0)) { 
           if (translateY > imageContainer.clientHeight/2) { parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)' } else { 
            parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight/2+'px)' 
           } 
          } else { 
           parent.style['-webkit-transform'] = '' 
          }; 
          return false; 
         } 

         function tap() { 
          let imgRect = img.getBoundingClientRect(); 
          let parentRect = parent.getBoundingClientRect(); 
          let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false); 
          let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false); 
          let startX = event.pageX - translateX, startY = event.pageY - translateY; 
          let max_left = parentRect.left - imgRect.left; 
          let max_top = parentRect.top - imgRect.top; 
          var evt = window.event; 
          translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX)); 
          translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY)); 
          translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0; 
          if ((translateX != 0) && (translateY != 0)) { 
           if (translateY > imageContainer.clientHeight/2) { 
            parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)' 
           } else { 
            parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight/2+ 'px)' 
           } 
          } else { 
           parent.style['-webkit-transform'] = '' 
          }; 
         } 
         function makeDraggable(event) { 

          parent = img.parentNode; 
          imageContainer = img.parentNode.parentNode; 
          $(parent).css({ 

           "display": "-webkit - box", 
           "-webkit - box - pack": "center", 
           "-webkit - box - align": "center", 
           "z-index": "5" 
          }); 
          $(imageContainer).css({ 
           "text-align": "center", 
           "margin": "0", 
           "padding": "0",        
           "overflow": "hidden", 
           "-webkit - user - select": "none", 
           "cursor": "context - menu", 
          }); 
          let imgRect = img.getBoundingClientRect(); 
          let parentRect =parent.getBoundingClientRect(); 
          let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false); 
          let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false); 
          let startX = event.pageX - translateX, startY = event.pageY - translateY; 
          let max_left = parentRect.left - imgRect.left; 
          let max_top = parentRect.top - imgRect.top; 

          window.onmousemove = function (evt) { 
           if (evt == null) { evt = window.event; } 
           translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX)); 
           translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY)); 
           translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0; 
           if ((translateX != 0) && (translateY != 0)) { 
            if (translateY > imageContainer.clientHeight) { 
             parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)' 
            } else { 
             parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight/2+ 'px)' 
            } 
           } else { 
            parent.style['-webkit-transform'] = '' 
           }; 
           return false; 
          } 

          window.onmouseup = function (evt) { 
           setTransformOrigin(); 
           window.onmousemove = null; 
          } 

          return false; 
         }; 
         img.addEventListener('mousedown', function() { makeDraggable(event); }); 
           elem.bind('mousewheel', function (e) { 
          var img = e.currentTarget.style.width; 
          var scaleX = e.currentTarget.getBoundingClientRect().width/e.currentTarget.offsetWidth; 
          var w = ""; 
          var resW = ""; 
          var resL = ""; 
          var resT = ""; 
          var zValue = 1.2; 
          var newScale = scaleX * zValue; 
          var newScale = "scale(1)"; 
          var val = parseInt(w.replace('%', '')); 
          if (e.originalEvent.wheelDelta/120 > 0) { 
           newScale = scaleX * zValue; 
          } 
          else { 
           if ((scaleX/zValue) > 1) { 
            newScale = scaleX/zValue 
           } else { 
            newScale = 1.0; 
           } 
          } 
          scaleImage(newScale, e); 
          setTransformOrigin(); 
          window.onmousemove = null; 
         }); 
        } 
       } 
      }]); 

    })(); 

Verwendung bei HTML als

<image zoom src="" ></image>