Skip to content

Instantly share code, notes, and snippets.

@colinbendell

colinbendell/imagedata.js

Last active December 5, 2017 09:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save colinbendell/1b4e2aba35298adddd093e3ef33de22f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save colinbendell/1b4e2aba35298adddd093e3ef33de22f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. colinbendell revised this gist Nov 25, 2016. 1 changed file with 31 additions and 29 deletions.
    60 changes: 31 additions & 29 deletions imagedata.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,31 @@
    JSON.stringify(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)
    };
    }));
    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);
  2. colinbendell revised this gist Nov 24, 2016. 1 changed file with 9 additions and 7 deletions.
    16 changes: 9 additions & 7 deletions imagedata.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,29 @@
    JSON.stringify(Array.from(document.getElementsByTagName("img")).map(v => {
    var rect = v.getBoundingClientRect();
    var vHeight = (window.innerHeight || doc.documentElement.clientHeight);
    vWidth = (window.innerWidth || doc.documentElement.clientWidth);
    var vWidth = (window.innerWidth || doc.documentElement.clientWidth);
    var vDPR = window.devicePixelRatio;
    return {
    src: v.currentSrc,
    cssWidth: v.clientWidth,
    naturalWidth: v.naturalWidth,
    ratioWidth: (v.naturalWidth / v.clientWidth).toFixed(1),
    cssHeight: v.clientHeight,
    naturalHeight: v.naturalHeight,
    ratioHeight: (v.naturalHeight / v.clientHeight).toFixed(1),
    hidden: !(v.offsetParent != null),
    bottom: rect.bottom,
    height: rect.height,
    left: rect.left,
    right: rect.right,
    top: rect.top,
    width: rect.width,
    vWidth: vWidth,
    vHeight: vHeight,
    pixelWaste: (v.naturalHeight - v.clientHeight) * (v.naturalWidth - v.clientWidth),
    srcset: v.srcset,
    sizes: v.sizes,
    isPicture: (v.parentNode.nodeName === "PICTURE")
    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)
    };
    }));
  3. colinbendell created this gist Nov 24, 2016.
    27 changes: 27 additions & 0 deletions imagedata.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    JSON.stringify(Array.from(document.getElementsByTagName("img")).map(v => {
    var rect = v.getBoundingClientRect();
    var vHeight = (window.innerHeight || doc.documentElement.clientHeight);
    vWidth = (window.innerWidth || doc.documentElement.clientWidth);
    return {
    src: v.currentSrc,
    cssWidth: v.clientWidth,
    naturalWidth: v.naturalWidth,
    ratioWidth: (v.naturalWidth / v.clientWidth).toFixed(1),
    cssHeight: v.clientHeight,
    naturalHeight: v.naturalHeight,
    ratioHeight: (v.naturalHeight / v.clientHeight).toFixed(1),
    hidden: !(v.offsetParent != null),
    bottom: rect.bottom,
    height: rect.height,
    left: rect.left,
    right: rect.right,
    top: rect.top,
    width: rect.width,
    vWidth: vWidth,
    vHeight: vHeight,
    pixelWaste: (v.naturalHeight - v.clientHeight) * (v.naturalWidth - v.clientWidth),
    srcset: v.srcset,
    sizes: v.sizes,
    isPicture: (v.parentNode.nodeName === "PICTURE")
    };
    }));