OpenCV.js Hough Line Transform / Brett Cooper

Brett Cooper

In New Zealand being kid of human. We might make mistakes but we will make other things too. - Michael Joseph Savage

Workspace

Published

Edited

Dec 27, 2021

3 forks

Importers

5 stars

{

const inputImage = await FileAttachment("image.png").image()

const gray = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'grayCanvas'});

const filtered = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'filteredCanvas'});

const canny = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'cannyCanvas'});

const out = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'outCanvas'});

let src = cv.imread(inputImage );

let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); //cv.CV_8UC3

let dst2 = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); //cv.CV_8UC3

let lines = new cv.Mat();

let colour = new cv.Scalar(200, 150, 150); // colour do draw output in

cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, cv.CV_8UC1); // Convert the input image to grayscale.

cv.imshow(gray, src);

cv.bilateralFilter(src, dst2, bf1, bf2, bf3, cv.BORDER_DEFAULT); // cv.bilateralFilter( src, dst, d, sigmaColor, sigmaSpace[, dst[, borderType]] )

cv.imshow(filtered, dst2);

cv.Canny(dst2, src, T1, T2,3); // cv2.Canny(input, output, threshold1, threshold2[, edges[, apertureSize[, L2gradient]]])

cv.imshow(canny, src);

cv.HoughLinesP(src, lines, hl1, Math.PI / hl2, hl3, hl4, hl5); // cv.HoughLines (image, lines, rho, theta, threshold, srn =0, stn =0, min_theta =0, max_theta = Math.PI)

// draw lines

for (let i = 0; i < lines.rows; ++i) {

let startPoint = new cv.Point(lines.data32S[i * 4], lines.data32S[i * 4 + 1]);

let endPoint = new cv.Point(lines.data32S[i * 4 + 2], lines.data32S[i * 4 + 3]);

cv.line(dst, startPoint, endPoint, colour);

}

cv.imshow(out, dst);

src.delete();

dst.delete();

dst2.delete();

lines.delete();

const css = 'max-width:100%';

inputImage.style.cssText += css;

out.style.cssText += css;

gray.style.cssText += css;

filtered.style.cssText += css;

canny.style.cssText += css;

return html`

<div style="padding-right:10px">${inputImage}</div>

<div style="padding-right:10px">${filtered}</div>

<div style="padding-right:10px">${canny}</div>

}

import {cv, handleError, registerFile} from "@mootari/opencv-js"

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more