Passing a variable from Jquery into HTML-CodePudding

I have a jquery function that works out the width and height of an image I upload through umbraco. How can I call this.width and this.height into my img src in html at the bottom of the page?

 <script>

    function getMeta(varA, varB) {
        if (typeof varB !== 'undefined') {
            alert(varA   ' width '   varB   ' height');
        } else {
         
            var img = new Image();
            img.src = varA;
            img.onload = function () {
                getMeta(this.width, this.height);

            }
        }
    }
    getMeta("@image.Url()")
</script>

    <img src="@image.Url()" width="" height="" border="0" alt="@Model.Value("mapImage") 
    mapImage" usemap="#Map" />

I've left the width and height empty but that's where I want it to equal this.width and this.height. I need it to automatically call it for other functions I have as it needs to change depending on the size of the image uploaded.

Thanks in advance for any help :)

CodePudding user response：

Well.. good news - this is native JS - no jquery used the code you've posted

Second - you don't need to send the width and height to your data model - just update your image element. so...

img.onload = function () {
  const imgElement = document.querySelector('img'); // select the image element in you HTML page
  imgElement.style.width = `${this.width}px`; // set a proper with using pixels as unit
  imgElement.style.height = `${this.height}px`; // set height the same way
}

This should update your image proportions to be an exact fit to the image provided

CodePudding user response：

Assuming that I understood you well and you have an uploaded pic (that you get its source by calling @image.Url()), and you want to apply its dimensions of another pic (with id templateImg), this is the code:

<img id="templateImg" src="https://cdn.vox-cdn.com/thumbor/prZDWmD_4e4Js7KCRJ2JDrJOqO0=/0x0:939x704/1400x1050/filters:focal(0x0:939x704):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg" />

      <script type = "text/javascript">

         var uploadedPic = 'https://i.pinimg.com/736x/dd/50/38/dd5038cdbfde2a8f1583bd84f992f862.jpg';
    
         function getMeta(src) {
           return new Promise(resolve => {
                 var img = new Image();
                 img.src = src;
                 img.onload = function () {
                    resolve({
                       width: this.width, 
                       height: this.height
                    });
                 }
           })
         }
         getMeta(uploadedPic)
           .then(dimensions => {
              document.getElementById('templateImg').style.width = `${dimensions.width}px`;
              document.getElementById('templateImg').style.height = `${dimensions.height}px`;
           });   
            
      </script>

It was working example with real pictures, now you just replace the line var uploadedPic... with this Razor code:

var uploadedPic = '@image.Url()';

(assuming this is the path to your uploaded picture) and you'll be fine.