ImageHelper

Methods

canvasToImageData

Takes a canvas and converts it to a vtkImageData.

Optionally supply a bounding box to get a particular subset of the canvas.

Argument Type Required Description
canvas Yes The HTML canvas to convert
boundingBox Yes A bounding box of type [top, left, width, height]
canvas Yes
boundingBox Yes

imageToImageData

Converts an Image object to a vtkImageData.

Argument Type Required Description
image Yes
transform Yes

Source

index.d.ts
/**
*
*/
interface ITransform {
flipX : boolean;
flipY : boolean;
rotate : number;
}

/**
* Takes a canvas and converts it to a vtkImageData.
*
* Optionally supply a bounding box to get a particular subset of the canvas.
*
* @param canvas The HTML canvas to convert
* @param boundingBox A bounding box of type [top, left, width, height]
* @param canvas
* @param boundingBox
*/
export function canvasToImageData(canvas : any, boundingBox : number[]): void;

/**
* Converts an Image object to a vtkImageData.
* @param image
* @param transform
*/
export function imageToImageData(image : any, transform : ITransform): void;
index.js
import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';

/**
* Takes a canvas and converts it to a vtkImageData.
*
* Optionally supply a bounding box to get a particular subset of the canvas.
*
* @param canvas The HTML canvas to convert
* @param boundingBox A bounding box of type [top, left, width, height]
*/
function canvasToImageData(canvas, boundingBox = [0, 0, 0, 0]) {
const [top, left, width, height] = boundingBox;
const ctxt = canvas.getContext('2d');
const idata = ctxt.getImageData(
top,
left,
width || canvas.width,
height || canvas.height
);

const imageData = vtkImageData.newInstance({ type: 'vtkImageData' });
imageData.setOrigin(0, 0, 0);
imageData.setSpacing(1, 1, 1);
imageData.setExtent(
0,
(width || canvas.width) - 1,
0,
(height || canvas.height) - 1,
0,
0
);

const scalars = vtkDataArray.newInstance({
numberOfComponents: 4,
values: new Uint8Array(idata.data.buffer),
});
scalars.setName('scalars');
imageData.getPointData().setScalars(scalars);

return imageData;
}

/**
* Converts an Image object to a vtkImageData.
*/
function imageToImageData(
image,
transform = { flipX: false, flipY: false, rotate: 0 }
) {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;

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

const { flipX, flipY, rotate } = transform;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
ctx.rotate((rotate * Math.PI) / 180);
ctx.drawImage(image, -image.width / 2, -image.width / 2);

return canvasToImageData(canvas);
}

export default { canvasToImageData, imageToImageData };