将变量从 Jquery 传递到 HTML

Question

我有一个 jquery 函数，可以计算出我通过 umbraco 上传的图像的宽度和高度。如何在页面底部的 html 中将 this.width 和 this.height 调用到我的 img src 中？

 <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" />

我将宽度和高度留空，但我希望它等于 this.width 和 this.height。我需要它为我拥有的其他功能自动调用它，因为它需要根据上传的图像的大小进行更改。

提前感谢您的帮助:)

Answer 1

嗯.. 好消息 - 这是 native JS - 没有 jquery 使用了您发布的代码

第二 - 您不需要将 width 和 height 发送到您的数据模型 - 只需更新您的 image element。所以……

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
}

这应该会更新您的图像比例以完全适合所提供的图像

Answer 2

假设我很了解你并且你有一张上传的图片（你可以通过调用@image.Url() 获取它的来源），并且你想应用另一张图片的尺寸（id 为 templateImg），这是代码：

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

这是带有真实图片的工作示例，现在您只需将 var uploadedPic... 行替换为此 Razor 代码：

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

（假设这是您上传图片的路径），您会没事的。