Passing a variable from Jquery into HTML

Question

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

Yeah basically this other function I have needs you to declare the width and height of the image so it can map it, that's why I have to declare the height and width of each image haha — Develop, Nov 18 '21 at 10:41
This is multilayered question but in essence I think I know what you meant. First, you don't use jQuery in your code, but Razor (things start with @) and Umbraco uses MVC.NET so that would be Razor. Second, in your fuzzy code, you just read the width and height of the existing pic to set it later on on existing pic. If I understood you well, you want to get the w/h of the uploaded pic and apply it on the existing pic in your DOM. However, this is out of scope, you should look up how to detect the uploaded pic dimensions. You just give me path to uploaded pic and I'll code it for you — Dalibor, Nov 18 '21 at 11:02
Hi, the picture's uploaded in umbraco back office. '@'inherits Umbraco.Web.Mvc.UmbracoViewPage '@'using ClientDependency.Core.Mvc @{ var image = Model.Value ("mapImage"); That's the code at the top to call the image in — Develop, Nov 18 '21 at 11:20

score 0 · Answer 1 · answered Nov 18 '21 at 10:47

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

Dalibor · Answer 2 · 2021-11-18T12:12:43.313

0

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:

<text>
var uploadedPic = '@image.Url()';
</text>

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

edited Nov 18 '21 at 12:12

answered Nov 18 '21 at 11:25

Dalibor

1,430
18
42

Hi, you're on the right track here! unfortunately its still not affecting the image and the mapping still errors because it says no width or height is declared on the image. Works perfectly if I input say width=1280 and height=720 manually – Develop Nov 18 '21 at 11:40
but you're not supposed to change w/h of templateImg in HTML. It's done in code. It's adjusted to the w/h of the uploadedPic. – Dalibor Nov 18 '21 at 11:43
Here, update uploadedPic source all you want and you'll see Homer's image stretching according to your input: https://jsfiddle.net/14j2mL73/ – Dalibor Nov 18 '21 at 11:47
Yeah yeah it works perfectly when I do that actually :). I think the reason it's erroring is because of how I'm assigning uploaded pic var uploadedPic = '@image.Url()'; I don't think it pics up the image for some reason, maybe because it needs to be declared as an image? – Develop Nov 18 '21 at 12:00
I'm not an expert in Umbraco, but in Razor you should declare image and assign it a value. Your question was about html/jquery, and Razor is presentation framework for MVC.NET and that is something else altogether. Google for declaring variables in razor. I used to work with it long time ago, and if I recall well, when you use javascript on your razor page, you should write it something like `...` – Dalibor Nov 18 '21 at 12:04
Here's some example: https://stackoverflow.com/questions/4599169/using-razor-within-javascript So I'll update my answer, and you give it a try (I don't have .NET installed so I can't try it, I'm coding blindfolded) – Dalibor Nov 18 '21 at 12:07

Passing a variable from Jquery into HTML

2 Answers2