脚本创建图像并获取其尺寸
我想在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回答
-
喵喵时光机
你看，该函数是在图像完全加载之前调用的。我们使用其他替代方案（如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> -
蓝山帝景
您需要给浏览器时间来加载图像。图像有一个回调，你可以把自己挂在上面。一旦触发，就可以安全地使用宽度和高度属性。onload -
慕田峪9158850
试试这个与设置属性，为我工作。我以这个例子从互联网上拍了一张图片。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); -
梦里花落0921
您需要等到事件才能获得实际高度和宽度。像这样的东西会起作用。onloadconst 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);};
随时随地看视频慕课网APP
相关分类
JavaScript