为了账号安全,请及时绑定邮箱和手机立即绑定

脚本创建图像并获取其尺寸

脚本创建图像并获取其尺寸

杨魅力 2022-09-23 16:49:57

我想在javascript中创建一个图像,然后从函数中获取其维度。我总是得到0 0或未定义未定义


let rocketimage=document.createElement('img');

rocketimage.src='rocket.png';

rocketimage.id='rocketimage';

const body=document.getElementsByTagName('body')[0];

body.appendChild(rocketimage);


function getDimensions(id) {

    var element = document.getElementById(id);

    if (element && element.tagName.toLowerCase() == 'img') {

        return {

            width: element.width,

            height: element.height

        };

    }

}


// using the function on the above image:

var dims = getDimensions('rocketimage');

console.log(dims.width);

console.log(dims.height);

<!DOCTYPE html>

<html dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>rocktetgame</title>

  </head>

  <body>

    <script src="getimagesize.js" charset="utf-8"></script>

  </body>

</html>


查看完整描述

4 回答

?
喵喵时光机

TA贡献1503条经验 获得超7个赞

你看,该函数是在图像完全加载之前调用的。我们使用其他替代方案(如Jquery就绪函数)来解决这些类型的问题。getDimensions()window.onload = function(){}


我也删除了,因为在这种情况下,我们可以只用文档调用它,它需要更少的代码,这使得脚本看起来更干净。const body=document.getElementsByTagName('body')[0];


<script>

    function getDimensions(id) {

        var element = document.getElementById(id);

        if (element && element.tagName.toLowerCase() == 'img') {

            return {

                width: element.width,

                height: element.height

            };

        }

    }


    let rocketimage = new Image();

    rocketimage.src ='rocketimage';

    rocketimage.id  ='rocketimage';

    document.body.appendChild(rocketimage);


    window.onload = function() {

        dimentions = getDimensions('rocketimage');

        console.log(dimentions);

    }

</script>


查看完整回答
反对 回复 2022-09-23
?
蓝山帝景

TA贡献1518条经验 获得超7个赞

您需要给浏览器时间来加载图像。

图像有一个回调,你可以把自己挂在上面。一旦触发,就可以安全地使用宽度和高度属性。onload


查看完整回答
反对 回复 2022-09-23
?
慕田峪9158850

TA贡献1466条经验 获得超7个赞

试试这个与设置属性,为我工作。我以这个例子从互联网上拍了一张图片。


let rocketimage=document.createElement('img');

rocketimage.setAttribute("src", "https://r- 

cf.bstatic.com/images/hotel/max1024x768/186/186280585.jpg");

rocketimage.setAttribute('id','rocketimage')


const body=document.getElementsByTagName('body')[0];

body.appendChild(rocketimage);


function getDimensions(id) {


var element = document.getElementById(id);

if (element || element.tagName.toLowerCase() == 'img') {

    return {

        width: element.width,

        height: element.height

        };

    }

 }


// using the function on the above image:

var dims = getDimensions('rocketimage');

console.log(dims.width);

console.log(dims.height);


查看完整回答
反对 回复 2022-09-23
?
梦里花落0921

TA贡献1448条经验 获得超5个赞

您需要等到事件才能获得实际高度和宽度。像这样的东西会起作用。onload


const rocketimage = document.createElement('img');

// OR - const rocketimage = new Image();


rocketimage.src = 'https://images.freeimages.com/images/large-previews/e2a/boise-downtown-1387405.jpg';

rocketimage.onload = function () {

  console.log('Height :', this.height);

  console.log('Width :', this.width);

};


查看完整回答
反对 回复 2022-09-23
  • 4 回答
  • 0 关注
  • 12 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信