Skip to content

Commit

Permalink
Merge pull request #12 from gaiborjosue/main
Browse files Browse the repository at this point in the history 
feat(CanvasFallback): Created 2d CanvasFallback
  • Loading branch information
@haehn
haehn authored Mar 7, 2024
2 parents 38805fc + b89dbe9 commit 33848e4
Show file tree
Hide file tree
Showing 7 changed files with 178 additions and 244 deletions.
4 changes: 4 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,3 +132,7 @@ dist

.DS_Store
.idea/

# Ignore the test images created under the tests/scripts/images
# The images start with "Test"
tests/scripts/images/Test*.png
132 changes: 132 additions & 0 deletions src/frameworks/canvasFallback.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import { Framework } from "../framework.js";

import { Util } from "../util.js";


export class CanvasFallback extends Framework {
constructor() {
super();
this.name = "canvasFallback";
}

get_canvas() {
let canvases = document.querySelectorAll('canvas');
let largestCanvas = canvases[0];
let largestArea = largestCanvas.width * largestCanvas.height;

for (let i = 1; i < canvases.length; i++) {
let area = canvases[i].width * canvases[i].height;
if (area > largestArea) {
largestCanvas = canvases[i];
largestArea = area;
}
}

return largestCanvas;
}

get_image(from_canvas) {

let canvas = this.get_canvas();

let ctx = canvas.getContext("2d");

let image = ctx.getImageData(0, 0, canvas.width, canvas.height);
let rgba_image = Util.rgba_to_grayscale(image.data);

if (from_canvas) {
return { data: image.data, width: image.width, height: image.height };
} else {
return { data: rgba_image, width: image.width, height: image.height };
}
}

set_image(new_pixels) {
let originalcanvas = this.get_canvas();

let newcanvas = window.document.createElement("canvas");

newcanvas.width = originalcanvas.width;
newcanvas.height = originalcanvas.height;

let ctx = newcanvas.getContext("2d");

let newPixelsRgba = Util.grayscale_to_rgba(new_pixels);

let newPixelsClamped = new Uint8ClampedArray(newPixelsRgba);

let newImageData = new ImageData(
newPixelsClamped,
newcanvas.width,
newcanvas.height
);

// Draw the new image data onto the canvas
ctx.putImageData(newImageData, 0, 0);

newcanvas.onclick = function () {
// on click, we will restore the nv canvas
newcanvas.parentNode.replaceChild(originalcanvas, newcanvas);
};

// replace nv canvas with new one
originalcanvas.parentNode.replaceChild(newcanvas, originalcanvas);
}

set_mask(new_mask) {
let image = this.get_image(true);

let originalcanvas = this.get_canvas();

let newcanvas = window.document.createElement('canvas');

newcanvas.width = originalcanvas.width;
newcanvas.height = originalcanvas.height;

let ctx = newcanvas.getContext('2d');

let imageclamped = new Uint8ClampedArray(image.data);

let newImageData = new ImageData(
imageclamped,
newcanvas.width,
newcanvas.height
);

// Draw the new image data onto the canvas
ctx.putImageData(newImageData, 0, 0);

image = ctx.getImageData(0, 0, newcanvas.width, newcanvas.height);

let masked_image = Util.harden_mask(image.data, new_mask);

let masked_image_as_imagedata = new ImageData(
masked_image,
newcanvas.width,
newcanvas.height
);

ctx.putImageData(masked_image_as_imagedata, 0, 0);

originalcanvas.parentNode.replaceChild(newcanvas, originalcanvas);
}

select_box(callback) {
let scriptBoxCraft = document.createElement("script");
scriptBoxCraft.type = "text/javascript";
scriptBoxCraft.src = "https://shrutivarade.github.io/BoxCraft/dist/boxCraft.min.js";
// scriptBoxCraft.src = "http://localhost:8888/dist/boxcraft.min.js";
let canvas = this.get_canvas();
document.head.appendChild(scriptBoxCraft);

scriptBoxCraft.onload = function() {

BoxCraft.createDraggableBBox(canvas, function (topleft, bottomright) {
console.log("Inside Draggable BBox", topleft, bottomright);
callback(topleft, bottomright);
});
}

}

}
26 changes: 5 additions & 21 deletions src/frameworks/cornerstone2d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import {Framework} from '../framework.js';

import {Util} from '../util.js';

import {CanvasFallback} from './canvasFallback.js';

export class Cornerstone2D extends Framework {

constructor(instance) {

super(instance);
this.name = 'cornerstone2D';
this.canvasFallback = new CanvasFallback();

this.cornerstonetools_instance = null;

Expand Down Expand Up @@ -72,26 +75,7 @@ export class Cornerstone2D extends Framework {

set_mask(new_mask) {

// TODO this needs to use segmentation/labelmap layers
// from cornerstone
// right now, this is modifying the canvas

let element = this.instance.getEnabledElements()[0];

let canvas = element.canvas;
width = canvas.width;
height = canvas.height;

let ctx = canvas.getContext('2d');

let imagedata = ctx.getImageData(0, 0, width, height);
let pixels = imagedata.data;

let masked_image = Util.harden_mask(pixels, new_mask);

let masked_image_as_imagedata = new ImageData(masked_image, width, height);

ctx.putImageData(masked_image_as_imagedata, 0, 0);
return this.canvasFallback.set_mask(new_mask);

}

Expand Down Expand Up @@ -121,4 +105,4 @@ export class Cornerstone2D extends Framework {

}

}
}
93 changes: 8 additions & 85 deletions src/frameworks/openseadragon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,107 +2,32 @@ import {Framework} from '../framework.js';

import {Util} from '../util.js';

import {CanvasFallback} from './canvasFallback.js';

export class OpenSeaDragon extends Framework {
constructor(instance) {
super(instance);
this.name = 'opensedragon';
this.canvasFallback = new CanvasFallback();

}

get_image(from_canvas) {


// TODO needs to be generic and executed with Boostlet.init

let viewer = null;
let vs = this.instance._viewers;
vs.forEach(function(e) {
if (e.id == 'viewer') {
viewer = e;
}
});

if (!viewer) {
throw "OpenSeaDragon viewer not found.";
}

let canvas = viewer.canvas.children[0];
let ctx = canvas.getContext("2d");

let image = ctx.getImageData(0, 0, canvas.width, canvas.height);
let rgba_image = Util.rgba_to_grayscale(image.data);
let pixels = image.data;

if(from_canvas){
return {'data':pixels, 'width':image.width, 'height':image.height};
}
else{
return {'data':rgba_image, 'width':image.width, 'height':image.height};
}

return this.canvasFallback.get_image(from_canvas);
}

set_image(new_pixels) {

let viewer = null;
let vs = this.instance._viewers;
vs.forEach(function(e) {
if (e.id == 'viewer') {
viewer = e;
}
});

if (!viewer) {
throw "OpenSeaDragon viewer not found.";
}

let canvas = viewer.canvas.children[0];
let ctx = canvas.getContext("2d");
let new_image = new ImageData(new Uint8ClampedArray(Util.grayscale_to_rgba(new_pixels)), image.width, image.height);

ctx.putImageData(new_image, 0, 0);

return this.canvasFallback.set_image(new_pixels);
}

set_mask(new_mask) {

let viewer = null;
let vs = this.instance._viewers;
vs.forEach(function(e) {
if (e.id == 'viewer') {
viewer = e;
}
});

if (!viewer) {
throw "OpenSeaDragon viewer not found.";
}

let canvas = viewer.canvas.children[0];
width = canvas.width;
height = canvas.height;

let ctx = canvas.getContext('2d');
let imagedata = ctx.getImageData(0, 0, width, height);
let pixels = imagedata.data;

let masked_image = Util.harden_mask(pixels, new_mask);

// console.log(masked_image);

let masked_image_as_imagedata = new ImageData(masked_image, width, height);

// console.log(masked_image_as_imagedata);

ctx.putImageData(masked_image_as_imagedata, 0, 0);


return this.canvasFallback.set_mask(new_mask);
}

select_box(callback) {


// alert("Click on top left and bottom rght coordinated of the desired selection box.")
Boostlet.hint("Click on top left and bottom right coordinated of the desired selection box.")

let isFirstClick = true;
let x1, y1, x2, y2;

Expand Down Expand Up @@ -133,11 +58,9 @@ export class OpenSeaDragon extends Framework {

}


// Add a click event listener to the document
document.addEventListener("click", handleClick);


}


Expand Down
45 changes: 11 additions & 34 deletions src/frameworks/papaya.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,28 @@ import { Framework } from "../framework.js";

import { Util } from "../util.js";

import { CanvasFallback } from "./canvasFallback.js";

export class Papaya extends Framework {
constructor(instance) {
super(instance);
this.name = "papaya";
this.canvasFallback = new CanvasFallback();
}

get_image(from_canvas) {
let canvas = this.instance[0].viewer.canvas;
let ctx = canvas.getContext("2d");

let image = ctx.getImageData(0, 0, canvas.width, canvas.height);
let rgba_image = Util.rgba_to_grayscale(image.data)

return { data: rgba_image, width: image.width, height: image.height };
// return {'data':pixels, 'width':image.width, 'height':image.height};
return this.canvasFallback.get_image(from_canvas);
}

set_image(new_pixels) {
let originalcanvas = this.instance[0].viewer.canvas;

let newcanvas = window.document.createElement("canvas");
newcanvas.width = originalcanvas.width;
newcanvas.height = originalcanvas.height;

let ctx = newcanvas.getContext("2d");

let newPixelsRgba = Util.grayscale_to_rgba(new_pixels);

let newPixelsClamped = new Uint8ClampedArray(newPixelsRgba);

let newImageData = new ImageData(
newPixelsClamped,
newcanvas.width,
newcanvas.height
);

// Draw the new image data onto the canvas
ctx.putImageData(newImageData, 0, 0);
return this.canvasFallback.set_image(new_pixels);
}

newcanvas.onclick = function () {
// on click, we will restore the nv canvas
newcanvas.parentNode.replaceChild(originalcanvas, newcanvas);
};
set_mask(new_mask) {
return this.canvasFallback.set_mask(new_mask);
}

// replace nv canvas with new one
originalcanvas.parentNode.replaceChild(newcanvas, originalcanvas);
select_box(callback) {
return this.canvasFallback.select_box(callback);
}
}
Loading

0 comments on commit 33848e4

Please sign in to comment.