<main>
<h1>Image Energy Calculator</h1>
<p>
      Each pixel in an image consist of three “lamps”: red, green and blue.<br />
    If all “lamps” are fully on, the pixel is white – if they're off, it's black.<br />
    This tool shows the intensity of each “lamp” in an image.<br />
    High values equals high energy-cost (on OLED).<br />
    Darker images and “dark mode” saves electricity.
</p>
<div>Red: <strong id="R"></strong></div>
<div>Green: <strong id="G"></strong></div>
<div>Blue: <strong id="B"></strong></div>
<h2>Average: <span id="A"></span></h2>
<label>
  <input type="file" id="F" />
  Choose a file
</label>
</main>

<img id="I" src="" />

body {
  background-color: #222;
  color: #FEFEFE;
  display: flex;
  flex-direction: column;
  font-family: ui-sans-serif, system-ui, sans-serif;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.5;
  padding: 1rem 2rem;
}
img {
  border: 2px solid #FEFEFE;
  max-width: 20rem;
  object-fit: cover;
  width: 100%;
}
input {
  display: none;
}
label {
  border: 1px solid #FEFEFE;
  cursor: pointer;
  display: inline-flex;
  padding: 0.75rem 1.5rem;
}
@media (min-width: 768px) {
  body { flex-direction: row; }
}

I.onload = () => {
  const [r,g,b] = pixel2percent(I);
  const avg = Math.ceil((r+g+b) / 3);
  R.innerText = `${r}%`;
  G.innerText =`${g}%`;
  B.innerText = `${b}%`;
  A.innerText = `${avg}%`
}

function loadImg() {
  const reader = new FileReader();
    reader.onload = (e) => {
      I.setAttribute("src", e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);
}

function pixel2percent(img) {
  const width = img.width;
  const height = img.height;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);
  const imgData = ctx.getImageData(0, 0, width, height);
  
  const len = imgData.data.length / 4;

  let r = 0, g = 0, b = 0, a = 0;
  for (let i = 0; i < imgData.data.length; i += 4) {
    a = 255 / imgData.data[i + 3];
    r+= imgData.data[i] / 255 / a;
    g+= imgData.data[i + 1] / 255 / a;
    b+= imgData.data[i + 2] / 255 / a;
  }
  r = Math.floor((r/len) * 100);
  g = Math.floor((g/len) * 100);
  b = Math.floor((b/len) * 100);

  return [r, g, b];
}

F.addEventListener('change', loadImg);

/* Demo Init */
I.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAACFElEQVR4nO3TAQ2AQADEsAPjSAcD/BS0Epbs2p53wK9bFjgzCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg8DJtg9sfgMOlSm3aAAAAABJRU5ErkJggg==';