decipher2.js

/** 
  go/enablement-skills-readiness
  Must refresh the page before run, as image src keeps changing
**/

// Try & Error, this is the image by current index order:
let targetImg = document.getElementsByTagName('img')[2].src

// Buffer of image pixels, let’s take first row, 1000 pixels (actual needed 318 only)
let pixels;
let canvas = document.createElement("canvas");
// IMPORTANT, by default it goes 300 pixels only ( < 318 )
canvas.width = 1000;

// Code to read the pixels out of the image
let tmpImg = new Image();
tmpImg.crossOrigin = "Anonymous";
tmpImg.onload = () => {
  const context = canvas.getContext('2d');
  context.drawImage(tmpImg, 0, 0);
  pixels = context.getImageData(0, 0, 400, 1).data;

  // Code to map the buffer into “custom” hex values
  // Since the hex values are always repeated, take index 0 only.
  function buff2HHex(buffer) {
    return [...new Uint8ClampedArray(buffer)]
        .map(x => x.toString(16)[0])
        .join('');
  }
  let hHex = buff2HHex(pixels);

  // Code to convert those custom hex values into binary
  // And eventually binary into ASCII
  // 1. Original hex value has 8 bytes, now 4.
  // 2. We take first 3 bytes,
  // 3. Then another 3 bytes,
  // 4. Then 2 bytes only.
  // 5. Forming 3+3+2 = 8 bits = 1 ASCII character

  let txt = '';
  for(let i=0; i< hHex.length;) {
      let bin='';
      for(let x=0; x<2; x++) {
          for(let j=0; j<3; j++) {
              bin+=(hHex[i]=='f')? '1':'0';
              i++;
          }
          i++;
      }
      for(let j=0; j<2; j++) {
          bin+=(hHex[i]=='f')? '1':'0';
          i++;
      }
      i+=2;

      txt += String.fromCharCode(parseInt(bin, 2));
  }
  console.log(txt);
}
tmpImg.src = targetImg;