gpt4 book ai didi

javascript获取表格中所有图像的自然宽度/高度

转载 作者:行者123 更新时间:2023-11-30 14:10:25 29 4
gpt4 key购买 nike

我正在尝试从 Image 列中列出的图像中获取实际图像尺寸,并将其显示在 Image Size 列中。

我遇到的问题是,我只能获取第一张图片的大小,该图片会添加到 Image Size 列的每个单元格中。

jsFiddle: https://jsfiddle.net/a92ck0em/

  var xmlFile = 'https://raw.githubusercontent.com/joenbergen/files/master/XMLParse2.xml';

function loadDoc() {
var xhttp = new XMLHttpRequest();

xhttp.open("GET", xmlFile, true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
xmlFunction(this.response);
}
};

}

function xmlFunction(xml) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");
var table = "<tr><th>Category</th><th>Title</th><th>Image</th><th>Image Size</th></tr>";
var x = xmlDoc.getElementsByTagName("ITEM");
for (var elem of x) {
var titles = elem.getElementsByTagName(
"TITLE")[0].childNodes[0].nodeValue;
var cats = elem.getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;
var imageURL = elem.getElementsByTagName("IMAGE").length === 0 ? "..." : elem.getElementsByTagName("IMAGE")[0].getAttribute('url');
var imageSize = elem.getElementsByTagName("IMAGE").length === 0 ? "..." : elem.getElementsByTagName("IMAGE")[0].width + 'x' + [0].height;

table += "<tr><td>" + cats + "</td><td>" + titles + "</td><td>" + "<img src=" + imageURL + ' height="150" width="100">' + '</td><td id="cellId"><textTag>' + "" + "</textTag></td></tr>";
}
document.getElementById("myTable").innerHTML = table;

document.querySelector("img").addEventListener('load', function() {
var imgTags = document.querySelectorAll('img'), i;
for (i = 0; i < imgTags.length; ++i) {
var image_width = document.querySelector("img").naturalWidth;
var image_height = document.querySelector("img").naturalHeight;
}
$('#myTable textTag').each(function() {
$(this).append(image_width + 'x' + image_height);
//console.log(image_width + 'x' + image_height);
});
});
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
}
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<button type="button" onclick="loadDoc()">Load</button>
<br><br>
<table id="myTable"></table>

预期:

enter image description here

最佳答案

好的,你的问题有很多部分,我开始做最简单的事情,记录解析的 xml 文档,如下所示:

...
<IMAGE url="...."></IMAGE>
<IMAGESIZE></IMAGESIZE>
...

因此在您的脚本中您得到了一个不存在的属性。所以你可以安全地删除这一行:

var imageSize = elem.getElementsByTagName("IMAGE").length === 0 ? "..." : elem.getElementsByTagName("IMAGE")[0].width + 'x' + [0].height;

接下来您需要检查图像是否已加载,这是最简单的事情:

"<img src=" + imageURL + ' height="150" width="100" onload="this._loaded = true;">' +

这将为其添加专有的 _loaded 属性。

接下来您需要检查图像何时加载,加载后会触发一个函数,您需要一个递归函数来执行不会破坏堆栈的操作:

var imgTags = document.getElementsByTagName('img');
function isLoaded(){
if(Array.prototype.slice.call(imgTags).some(function(d,i){return !d._loaded})){
setTimeout(isLoaded,4);
} else {
$('#myTable textTag').each(function(i,node) {
node.textContent = imgTags[i].naturalWidth + 'x' + imgTags[i].naturalHeight;
//console.log(image_width + 'x' + image_height);
});
}
};
isLoaded();

我删除了 querySelectorAll(img) 位,它比 getElementsByTagName 慢并且不返回 LIVE HTML Collection,返回一个节点列表。一旦检测到所有 _loaded 属性,加载的函数将触发您的 Jquery 事物。 Array.prototype.slice.call 是将 HTML CollectionNodeList 转换为常规数组的老派方法,很酷的 children Array.from 如今,这取决于你。您还可以通过存储一次 Array.prototype.slice.call... 的结果来稍微优化上述函数,我将其留给您。总而言之,它看起来像这样:

https://jsfiddle.net/ibowankenobi/h9evc81a/

关于javascript获取表格中所有图像的自然宽度/高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54562129/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com