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 HTMLCanvasElement Yes The HTML canvas to convert.
boundingBox Array. No A bounding box of type [top, left, width, height]

imageToImageData

Converts an Image object to a vtkImageData.

Argument Type Required Description
image HTMLImageElement Yes The HTML image to convert.
transform ITransform No default={flipX: false, flipY: false, rotate: 0}

Source

index.d.ts
import vtkImageData from '../../../Common/DataModel/ImageData';

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 {HTMLCanvasElement} canvas The HTML canvas to convert.
* @param {Number[]} [boundingBox] A bounding box of type [top, left, width, height]
*/
export function canvasToImageData(
canvas: HTMLCanvasElement,
boundingBox?: number[]
): vtkImageData;

/**
* Converts an Image object to a vtkImageData.
* @param {HTMLImageElement} image The HTML image to convert.
* @param {ITransform} [transform] default={flipX: false, flipY: false, rotate: 0}
*/
export function imageToImageData(
image: HTMLImageElement,
transform?: ITransform
): vtkImageData;
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.height / 2);

return canvasToImageData(canvas);
}

export default { canvasToImageData, imageToImageData };