javascript - 具有图片元素最大尺寸的图像的 url
问题描述
在图片元素中,例如这个:
<picture class="l-display-block"> <source srcset="https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?downsize=1440px:*, https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?download=2880px:* 2x" media="(min-width: 1025px)"> <source srcset="https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?downsize=1024px:*, https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?downsize=2048px:* 2x" media="(min-width: 769px)"> <source srcset="https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?downsize=768px:*, https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?downsize=1536px:* 2x" media="(min-width: 600px)"> <source srcset="https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?interpolation=progressive-bilinear&downsize=599px:*, https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?downsize=1198px:* 2x"> <img src="https://cache.marriott.com/marriottassets/marriott/NYCXR/nycxr-bar-8322-hor-feat.jpg?downsize=1024px:*" alt="King Cole Bar" class="l-display-block" itemprop="url"> </picture>
如何在JavaScript中获取具有图片元素最大尺寸的图像的url
我试过了:
var divs = document.querySelectorAll("source");
for (m = 0; m < divs.length; m++) {
url = img.getAttribute("data-srcset-large")||img.getAttribute("data-srcset")||img.getAttribute("srcset");
if (url!=null) url= url.replace(/\s+[0-9]+(\.[0-9]+)?[wx]/g, "").split(/,/)[0];
}
但它只获得第一个链接而不是最大尺寸的图像
解决方案
我写了这个函数来完成这项工作..
function get_filesize(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("HEAD", url, false); // Notice "HEAD" instead of "GET",
// to get only the header
xhr.onreadystatechange = function() {
if (this.readyState == this.DONE) {
callback(parseInt(xhr.getResponseHeader("Content-Length")));
}
};
xhr.send();
}
function LargestDimURLF(img){
var Objs = [];
var sourceElms = img.getElementsByTagName("SOURCE");
for(k=0;k<sourceElms.length;k++){
var sourceElm = sourceElms[k];
var urls = sourceElm.getAttribute("srcset");
if (urls==null) {
for(s=0;s<sourceElm.attributes.length;s++){
var att = sourceElm.attributes[s];
if (att.nodeName.indexOf("data-srcset")!=-1){
urls = att.value;
}
}
}
if (urls!=null) {
urls= urls.replace(/\s+[0-9]+(\.[0-9]+)?[wx]/g, "").split(/,/);
for(j=0;j<urls.length;j++){
var url = urls[j];
get_filesize(url, function(imgSize) {
var Obj={"url":url,"size":imgSize}
Objs.push(Obj);
});
}
}
}
Objs.sort(function(a, b) {
return b.size - a.size;
});
return Objs[0].url||"";
}
var url = LargestDimURLF(document.getElementByID("myPicture"));
推荐阅读
- c# - 当 Assert 语句在不同的方法中时使用 NUnit Multiple Assert
- c# - Xamarin:显示版本和上次构建时间,以及每次构建时的自动增量版本
- sql - 字符串缓冲区太小 ORA-06502
- spring - Spring Data Rest - 设置请求超时
- css - 浮动元素的零高度边缘是否会被视为边缘?
- laravel - Illuminate\Auth\SessionGuard::__construct() 必须实现接口
- json - Json 模式仅验证数组中的第一个元素
- docker - 如何在 Docker 中为 WSO2 身份服务器指定 SSL 证书?
- twitter-bootstrap - 无法显示后效
- csv - Tableau 没有将我的 csv 数据源转换为表格