如何根據輸入框中的值更改圖像的寬度和高度？

應該可以更改滑塊元素的大小。 change the width and height of image

行爲：

當我們選擇幻燈片，寬度和圖像高度被示出在輸入框。

當我們改變輸入框的寬度和高度時，圖像大小沒有像預期的那樣變化。

請讓我知道如何履行這項任務。

HTML：

<img class="imgClass ng-scope" data-ng-style="slideCTRL.changeImagesize(addOn)" ng-src="pictures/vivek/Hydrangeas.jpg" ng-if="addOn.type == 'picture'">

的Javascript：

vm.changeImagesize = function (addOn) { 

    var width = $(".imgContainer").width(); 
    var height = $(".imgContainer").height(); 
    //var height = width * (resolutionY/resolutionX); 
    var imagewidth=$(".dcsTextbox input.slave").val(); 
    var imageheight=$(".dcsTextbox:eq(1) input.slave").val(); 
    var transform = ""; 
    var origin = "50% 50%"; 
    if (addOn.rotationDeg === 90) { 
    width = $(".imgContainer").width() * (resolutionY/resolutionX); 
     height = $(".imgContainer").width(); 
     origin = "0% 0%"; 
     transform = "translateX(" + $(".imgContainer").width() + "px)"; 
    } 
    if (addOn.rotationDeg === 270) { 
     width = $(".imgContainer").width() * (resolutionY/resolutionX); 
     height = $(".imgContainer").width(); 
     origin = "0% 0%"; 
     transform = "translateY(" + width + "px)"; 
    } 
    var borderStyle = "hidden"; 
    var addOnIndex = $scope.viewModel.selectedAddon; 
    if (addOnIndex !== undefined && $scope.viewModel.actSlideShow.children[$scope.viewModel.currentSlide].children[addOnIndex] === addOn) { 
     borderStyle = "dashed"; 
    } 

    if (addOn.type === "picture") { 
     return { 
      "width":imagewidth, 
      "height":imageheight, 
      "max-width": width, 
      "max-height":height, 
      "transform": transform + " " + addOn.transform, 
      "transform-origin": origin, 
      "border-style": borderStyle, 
      "border-width": "thin", 
      "object-fit": "cover" 
     }; 

    } else if (addOn.type === "text") { 
     return { 
      position: "absolute", 
      left: 0, 
      top: 0, 
      width: width, 
      height: height/resolutionY * addOn.height, 
      "font-size": height/resolutionY * addOn.height, 
      color: addOn.color, 
      "text-align": "center", 
      "border-style": borderStyle, 
      "border-width": "thin", 
      transform: transform + " " + addOn.transform, 
      "transform-origin": origin, 
      "z-index": addOn.level 
     }; 
    } 
};

來源

2017-09-05 Upendra

哪裏是函數'getAddOnStyle'？我只看到'changeImagesize' – Tomer

@fatman，代碼現在已更新，請檢查。 – Upendra

看看這個plnkr希望幫助

https://plnkr.co/edit/WtikYf2acN1ZvqQ50hqI?p=preview

<!DOCTYPE html> 
    <html> 

     <head> 
     <script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
    </script> 

     <link rel="stylesheet" href="style.css" /> 
     <script src="script.js"></script> 

     </head> 

     <body ng-app = "app" ng-controller = "Ctrl"> 
     <img 
    src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" 
    height={{h}} width={{w}}> 
    <input type="text" ng-model = "w"> 
    <input type="text" ng-model = "h"> 
    {{w}},{{h}} 

     </body> 

    </html> 

script.js 

angular.module("app",[]). 
controller("Ctrl",function($scope){ 
    $scope.w = 0; 
    $scope.h = 0; 

});

來源

2017-09-05 07:20:11

希望這有助於你：

<!DOCTYPE html> 
    <html> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <body> 
     <div ng-app="" ng-init="width=10;height=10"> 
      <p>Input something in the input box:</p> 
      <p>width : <input type="number" ng-model="width" placeholder="Enter name here"></p> 
      <p>height : <input type="number" ng-model="height" placeholder="Enter name here"></p> 
      <img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" height={{height}} width={{width}}> 
      <div style="width:{{width}}px;height:{{height}}px;background-color:black"></div> 
     </div> 
    </body> 
    </html>

來源

2017-09-05 08:30:34

希望這plnker代碼可以幫助=>https://plnkr.co/edit/bTK4bm9izG6hn2oYfrZI?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app> 
    Width:<input type="text" ng-model="imgWidth"/> 
    Height:<input type="text" ng-model="imgHeight"/> 
<img ng-style="{width:imgWidth+'px',height:imgHeight+'px'}" ng-src="https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2013/09/12/101029496--sites-default-files-images-101029496-3176173-1748009911-hp.jp-1.jpg"> 
    </body> 

</html>

來源

2017-09-05 11:11:31 user1594

如何根據輸入框中的值更改圖像的寬度和高度？

回答

相關問題