image-js
Version:
Image processing and manipulation in JavaScript
113 lines • 3.87 kB
JavaScript
import { Image } from '../../Image.js';
import { drawKeypoints } from './drawKeypoints.js';
import { drawMatches } from './drawMatches.js';
import { scaleKeypoints } from './scaleKeypoints.js';
export const MontageDisposition = {
HORIZONTAL: 'horizontal',
VERTICAL: 'vertical',
};
export class Montage {
/**
* Scaled width of the first image.
*/
sourceWidth;
/**
* Scaled height of the first image.
*/
sourceHeight;
/**
* Scaled width of the second image.
*/
destinationWidth;
/**
* Scaled height of the second image.
*/
destinationHeight;
/**
* Origin of the destination / second image relative to top-left corner of the Montage.
*/
destinationOrigin;
/**
* Width of the Montage.
*/
width;
/**
* Height of the Montage.
*/
height;
/**
* Factor by which to scale the images are scaled in the montage.
*/
scale;
disposition;
/**
* Image of the Montage.
*/
image;
/**
* Create a Montage of two images. The two images are placed side by side for comparison.
* @param source - First image.
* @param destination - Second image.
* @param options - Montage options.
*/
constructor(source, destination, options = {}) {
const { scale = 1, disposition = 'horizontal' } = options;
if (!Number.isInteger(scale)) {
throw new TypeError('scale must be an integer');
}
this.scale = scale;
this.disposition = disposition;
this.sourceWidth = scale * source.width;
this.destinationWidth = scale * destination.width;
this.sourceHeight = scale * source.height;
this.destinationHeight = scale * destination.height;
if (disposition === 'horizontal') {
this.destinationOrigin = { row: 0, column: this.sourceWidth };
this.width = this.sourceWidth + this.destinationWidth;
this.height = Math.max(this.sourceHeight, this.destinationHeight);
}
else if (disposition === 'vertical') {
this.destinationOrigin = { row: this.sourceHeight, column: 0 };
this.width = Math.max(this.sourceWidth, this.destinationWidth);
this.height = this.sourceHeight + this.destinationHeight;
}
else {
throw new RangeError(`invalid disposition type: ${disposition}`);
}
if (source.colorModel !== 'RGB') {
source = source.convertColor('RGB');
}
if (destination.colorModel !== 'RGB') {
destination = destination.convertColor('RGB');
}
const image = new Image(this.width, this.height);
source
.resize({ xFactor: scale, yFactor: scale })
.copyTo(image, { out: image });
destination.resize({ xFactor: scale, yFactor: scale }).copyTo(image, {
out: image,
origin: this.destinationOrigin,
});
this.image = image;
}
/**
* Draw keypoints on the Montage.
* @param keypoints - Keypoints to draw.
* @param options - Draw keypoints options.
*/
drawKeypoints(keypoints, options = {}) {
const scaledKeypoints = scaleKeypoints(keypoints, this.scale);
this.image = drawKeypoints(this.image, scaledKeypoints, options);
}
/**
* Draw the matches between source and destination keypoints.
* @param matches - Matches to draw.
* @param sourceKeypoints - Source keypoints.
* @param destinationKeypoints - Destination keypoints.
* @param options - Draw matches options.
*/
drawMatches(matches, sourceKeypoints, destinationKeypoints, options = {}) {
this.image = drawMatches(this, matches, sourceKeypoints, destinationKeypoints, options);
}
}
//# sourceMappingURL=Montage.js.map