Extract a set of image information from a webpage
let imgData = Array.from(document.getElementsByTagName("img"))
.map(v => {
var rect = v.getBoundingClientRect();
var vHeight = (window.innerHeight || doc.documentElement.clientHeight);
var vWidth = (window.innerWidth || doc.documentElement.clientWidth);
var vDPR = window.devicePixelRatio;
return {
src: v.currentSrc,
cssWidth: v.clientWidth,
naturalWidth: v.naturalWidth,
cssHeight: v.clientHeight,
naturalHeight: v.naturalHeight,
hidden: !(v.offsetParent != null),
bottom: rect.bottom,
height: rect.height,
left: rect.left,
right: rect.right,
top: rect.top,
width: rect.width,
srcset: v.srcset,
sizes: v.sizes,
isPicture: (v.parentNode.nodeName === "PICTURE"),
vWidth: vWidth,
vHeight: vHeight,
vDPR: vDPR,
ratioWidth: (v.naturalWidth / v.clientWidth).toFixed(1),
ratioHeight: (v.naturalHeight / v.clientHeight).toFixed(1),
pixelWaste: (v.naturalHeight - v.clientHeight) * (v.naturalWidth - v.clientWidth)
};
});
return return JSON.stringify(imgData);