set_image_value_tracker.h

 
const char* set_image_value_tracker = R"JS(<![CDATA[
 
async function readGrayscaleFromImg(href) {
    // Ensure the image is loaded
    /*
    if (!imgEl.complete || imgEl.naturalWidth === 0) {
    await new Promise((resolve, reject) => {
        imgEl.onload = resolve;
        imgEl.onerror = reject;
    });
    }*/
 
    const imgEl = new Image();
    imgEl.crossOrigin = "anonymous"; // required if the PNG is cross-origin + CORS-enabled
    imgEl.src = href;
 
    // const bbox = imgEl.getBBox()
    // const w = bbox.width  | 1;
    // const h = bbox.height | 1;
    const w = imgEl.naturalWidth  | 1;
    const h = imgEl.naturalHeight | 1;
    
    const canvas = new OffscreenCanvas(w, h); // document.getElementById("c");
    //canvas.width = w;
    //canvas.height = h;
 
    const ctx = canvas.getContext("2d", { willReadFrequently: true });
 
    window.racklet = { imgEl, w, h, canvas, ctx };
 
    ctx.drawImage(imgEl, 0, 0);
 
    // If the image is cross-origin and not CORS-enabled, this will throw (tainted canvas)
    const { data } = ctx.getImageData(0, 0, w, h);
 
    // Build a grayscale array (0..255). For true grayscale PNG, R==G==B.
    const gray = new Uint8Array(w * h);
    for (let i = 0, p = 0; i < data.length; i += 4, p++) {
    gray[p] = data[i]; // R channel
    }
 
    return { width: w, height: h, gray };
}
 
async function marko(href){
  // const img = document.getElementById("src");
  const { width, height, gray } = await readGrayscaleFromImg(href);
 
  // Example: print a few pixels
  console.log("size:", width, height);
  console.log("top-left pixel:", gray[0]);
  console.log("pixel (10, 5):", gray[5 * width + 10]);
};
 
 
function set_image_value_tracker(img, func){
 
    const href = img.getAttribute("href") ||
      img.getAttributeNS("http://www.w3.org/1999/xlink", "href");
 
    console.info("href="+href)
    
    marko(href);
    //await img.decode();
    return false
 
    
    // var img = document.getElementById('rgb');
    const w = img.naturalWidth  | 0;
    const h = img.naturalHeight | 0;
    const canvas = new OffscreenCanvas(w, h);
    console.info(canvas)
 
    
    
    const ctx = canvas.getContext("2d", { willReadFrequently: true });
 
    // Expose for debugging
    window.rackster = { img, w, h, canvas, ctx };
 
    
    // Draw and read
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data; // Uint8ClampedArray, RGBA
 
    // Grayscale value at (x,y): for grayscale PNG, R==G==B
    function grayAt(x, y) {
    if (x < 0 || y < 0 || x >= w || y >= h) return null;
    const i = (y * w + x) * 4;
    return data[i]; // R
    }
    console.info('adding image value listener to ', img)
    
    const bbox  = img.getBoundingClientRect();
    img.addEventListener("mousemove", (ev) => {
    const x = ev.clientX - bbox.left;
    const y = ev.clientY - bbox.top;
    console.info(grayAt(x, y))
    // const i = x / bbox.width;
    // const j = y / bbox.height;
    //func(i,j)
    })
};
 
 
function add_image_value_trackers(){
 
    const elems = document.querySelectorAll(".MOUSE_VALUE");
 
    elems.forEach(elem => {
    // set_image_value_tracker(elem)
    var metadata = elem.querySelector("metadata");
    console.info(metadata)
    window.metadata = metadata
    var b64 = metadata.getAttribute("data-base64")
    console.info(b64)
    var arr = base64ToArrayLE(b64, Float32Array)
    //base64ToFloat32ArrayLE(b64)
    console.info(arr)
    })
}
//]]>)JS";