javascript 从网页中提取一组图像信息

Posted 2021-05-04

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