Skip to content

Instantly share code, notes, and snippets.

@colinbendell
Last active December 5, 2017 09:36
Show Gist options
  • Save colinbendell/1b4e2aba35298adddd093e3ef33de22f to your computer and use it in GitHub Desktop.
Save colinbendell/1b4e2aba35298adddd093e3ef33de22f to your computer and use it in GitHub Desktop.
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment