OSD Sobel Hack

gistfile1.txt

script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://boostlet.org/dist/boostlet.min.js";
script.onload = run;
document.head.appendChild(script);
eval(script);

function run() {
  
  canvas = viewer.canvas.children[0]; // TODO needs to be generic and executed with Boostlet.init

  // TODO needs to be in Boostlet.get_image
  ctx = canvas.getContext("2d");

  image = ctx.getImageData(0, 0, canvas.width, canvas.height);
  rgba_image = rgba_to_grayscale(image.data);
  // END OF TODO


  kernel = [
    -1, 0, 1,
    -2, 0, 2,
    -1, 0, 1
  ];

  filtered = Boostlet.filter(rgba_image, image.width, image.height, kernel);


  // TODO needs to be in Boostlet.set_image
  new_image = new ImageData(new Uint8ClampedArray(grayscale_to_rgba(filtered)), image.width, image.height);

  ctx.putImageData(new_image, 0, 0);
  // END OF TODO

}

// TODO once integrated, we can use the existing Util.grayscale_to_rgba and Util.rgba_to_grayscale functionality internally
function rgba_to_grayscale(rgba) {

  const grayscale = new Uint8Array(rgba.length / 4);

  for (let i = 0; i < rgba.length; i += 4) {

    grayscale[i / 4] = rgba[i];

  }

  return grayscale;

}

function grayscale_to_rgba(grayscale) {

  const rgba = new Uint8Array(grayscale.length * 4);

  for (let i = 0; i < grayscale.length; i++) {
    const g = grayscale[i];
    const index = i * 4;

    rgba[index] = g;
    rgba[index + 1] = g;
    rgba[index + 2] = g;
    rgba[index + 3] = 255; 
  }

  return rgba;

}