southill
12/5/2017 - 9:36 AM

Extract a set of image information from a webpage

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);