如何使用angularJS缩放图像 [英] How to zoom image with angularJS

问题描述

当我使用 angularJS 单击图像本身时，如何缩放图像.当我使用这个网站时，我不能这样做:https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation.有人可以帮忙吗?

我的js文件:

var camListApp = angular.module('camListApp', ['ui.bootstrap'])camListApp.filter('unique', function() {返回函数(输入，键){var 唯一 = {};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]);}}返回唯一列表；};});camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){$scope.custom = true;$scope.toggleCustom = 函数(网址){$scope.custom = !$scope.custom;$scope.imageView = url;};$http.get('http://localhost:8082/camera/list').then(function(response) {控制台日志(响应)；$scope.records= response.data;});}]);

我的 html 文件:

 
<b>搜索:</b><br><input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid 记录中的状态 | filter:searchBox | limitTo:8 | unique:'cameraid'"><br><br><br><br><table border = 1 class="table table-striped table-hover" style="width:45%"><头><tr><th><center>CamID</th></center><th><center>时间戳</th></center><th><center>查看图像</center></th></tr></thead><tr ng-repeat="记录记录 | filter:searchBox | orderBy:'+timestamp'"><td>{{record.cameraid}}</td><td>{{record.timestamp}}</td><td><中心><button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()">查看</center></button></td></tr></tbody><span id="myDIV" ng-hide="自定义"><img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400"></span><!--<span ng-hide="custom">到:<input type="text" id="to"/></span>--><span ng-show="自定义"></span>
<脚本>函数 myFunction() {document.getElementById("myDIV").style.position = "absolute";}</html>

解决方案

已创建 ng-click on image

HTML

 <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";}别的{imageId.style.width = "400px";imageId.style.height = "400px";}

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

How can i zoom the image when i click on the image itself using angularJS. I cant happen to do it when i using this website given: https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation . Anyone can help?

My js file:

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; 
    });
 }]);

My html file:

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

解决方案

Created ng-click on image

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

这篇关于如何使用angularJS缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！