Hi.. Any ideas how I can show the edges on the original image - say in RED. af

This was adapted from code of some of the demos: <div class="highlight highlight-s

Canny show edges on original image about jsfeat HOT 5 CLOSED

inspirit commented on June 8, 2024

Canny show edges on original image

from jsfeat.

Comments (5)

inspirit commented on June 8, 2024

just run through each Canny pixel and if it is not ZERO set the same pixel to RED in original image

from jsfeat.

JonElster commented on June 8, 2024

thanks!!!.. can you please point me to some code that will do this

from jsfeat.

JonElster commented on June 8, 2024

from jsfeat.

JonElster commented on June 8, 2024

How do you run through/loop and check the pixel?
thx

from jsfeat.

MarcPer commented on June 8, 2024

This was adapted from code of some of the demos:

var imageData = ctx.getImageData(0, 0, IMG_WIDTH, IMG_HEIGHT);
var img_u8 = new jsfeat.matrix_t(IMG_WIDTH, IMG_HEIGHT, jsfeat.U8_t | jsfeat.C1_t);
jsfeat.imgproc.canny(img_u8, img_u8, options.low_threshold | 0, options.high_threshold | 0);

// render result back to canvas
var data_u32 = new Uint32Array(imageData.data.buffer);
var alpha = (0xff << 24);
var i = img_u8.cols*img_u8.rows, pix = 0;
while(--i >= 0) {
    pix = img_u8.data[i];
    if (pix) {
            data_u32[i] = alpha | (0 << 16) | (0 << 8) | pix;
                // Sets ALPHA and RED channel bytes each to 256
    }
}

ctx.putImageData(imageData, 0, 0);
document.querySelector('#originalImage').src = canvas.toDataURL('image/webp');