javascript - 如何根据输入框中的值更改图像的宽度和高度？

要求：

应该可以改变滑动元件的尺寸。
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
        };
    }
};

最佳答案

看看这个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;

});