CODEWITHSUNDEEP
javascriptcssangularjshtml
Upendra
Upendra

Reputation: 19

How to change the width and height of image based on values from input box?

Requirement :

It should be possible to change the size of a slide element. change the width and height of image

Behavior:

When we select the slide , the width and height of the image is shown in the input box .

When we change the width and height from input box , image size is not getting changed as expected .

Kindly let me know how to acheieve this task .

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

Upvotes: 1

Views: 1988

Answers (3)

divyam
divyam

Reputation: 132

Hope this plnker code helps => 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>

Upvotes: 0

Sangwin Gawande
Sangwin Gawande

Reputation: 8166

Hope this helps you :

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

Upvotes: 1

Panos K
Panos K

Reputation: 1081

Check out this plnkr hope that helps

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;

});

Upvotes: 1

Related Questions