image-js/lib/featureMatching/visualize/drawMatches.js

Image processing and manipulation in JavaScript

import { getColors } from '../utils/getColors.js';
import { getMatchColor } from '../utils/getMatchColor.js';
import { sortByDistance } from '../utils/sortByDistance.js';
import { scaleKeypoints } from './scaleKeypoints.js';
/**
 * Draw the the matches between two images on their montage.
 * @param montage - The montage of two images to match.
 * @param matches - The matches between source and destination.
 * @param sourceKeypoints - Source keypoints.
 * @param destinationKeypoints - Destination keypoints.
 * @param options - Draw matches options.
 * @returns The comparison image.
 */
export function drawMatches(montage, matches, sourceKeypoints, destinationKeypoints, options = {}) {
    const { circleDiameter = 10, strokeColor = [255, 0, 0], showDistance = false, showDistanceOptions, } = options;
    let { maxNbMatches = matches.length } = options;
    if (maxNbMatches > matches.length) {
        maxNbMatches = matches.length;
    }
    const scaledSource = scaleKeypoints(sourceKeypoints, montage.scale);
    const scaledDestination = scaleKeypoints(destinationKeypoints, montage.scale);
    const result = montage.image;
    const colors = getColors(result, strokeColor, showDistanceOptions);
    const radius = Math.ceil(circleDiameter / 2);
    const matchesSortedByDistance = sortByDistance(matches);
    for (let i = 0; i < maxNbMatches; i++) {
        let matchColor = strokeColor;
        if (showDistance) {
            matchColor = getMatchColor(matchesSortedByDistance, i, colors);
        }
        const sourcePoint = scaledSource[matches[i].sourceIndex].origin;
        result.drawCircle(sourcePoint, radius, {
            strokeColor: matchColor,
            out: result,
        });
        const relativeDestinationPoint = scaledDestination[matches[i].destinationIndex].origin;
        const destinationPoint = {
            column: relativeDestinationPoint.column + montage.destinationOrigin.column,
            row: relativeDestinationPoint.row + montage.destinationOrigin.row,
        };
        result.drawCircle(destinationPoint, radius, {
            strokeColor: matchColor,
            out: result,
        });
        result.drawLine(sourcePoint, destinationPoint, {
            out: result,
            strokeColor: matchColor,
        });
    }
    return result;
}
//# sourceMappingURL=drawMatches.js.map