Question

我正在尝试获取图像加载后的高度。我尝试了几种不同的方法，但是offsetHeight会显示0，其他的都不会显示。在查询高度时就已经加载了元素，就在我查询它们的高度之前，我已经通过getElementById和id上的setAttribute调用成功设置了它们的宽度。

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.gallery img {
  width: 100%;
  display: block;
}

Id 6对应于一张图像，并且确实存在/已经在打字稿中这些调用时被渲染。

我在底部的想法是，如果我能获得图像的顶部和底部，我可以算出高度而不会得到图像。

console.log(document.getElementById("6").offsetHeight.toString());
console.log(document.getElementById("6").offsetHeight.valueOf());
console.log(document.getElementById("6").style.height);
console.log(document.getElementById("6").style.bottom);
console.log(document.getElementById("6").style.borderBottom);

HTML

  <div id={{i}} *ngFor="let image of images; let i = index;">
    <img class="img-responsive" src={{image.src}} alt="" (click)="clicked()">
  </div>

Answer 1

尝试一下-

const el: HTMLElement = document.getElementById('6');
console.log(el.offsetHeight);

Answer 2

您可以使用

String dateInString = "2014-03-20T10:05:48";
LocalDateTime localDateTime = LocalDateTime.parse(dateInString);
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
String formatDateTime = localDateTime.format(formatter);
System.out.println("formatDateTime :" + formatDateTime);

方法1

var myImg = document.querySelector("img");

方法2

var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;

natural height/width特定于var offsetWidth = myImg.offsetWidth; var offsetHeight = myImg.offsetHeight;标签，而偏移量 height / width指向每个DOM元素。

Answer 3

您可以安装库：

npm install image-size --save

示例代码：

var sizeOf = require('image-size');
var dimensions = sizeOf('images/funny-cats.png');
console.log(dimensions.width, dimensions.height);

异步/等待（打字稿和ES7）

var { promisify } = require('util');
var sizeOf = promisify(require('image-size'));
try {
  const dimensions = await sizeOf('images/funny-cats.png');
  console.log(dimensions.width, dimensions.height);
} catch (err) {
  console.error(err);
}

引用here

希望对您有帮助。

如何通过打字稿获取img高度

3 个答案: