Canny show edges on original image

[JonElster]

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

jsfeat.imgproc.canny(img_u8, img_u8, options.low_threshold | 0, options.high_threshold | 0);

thx in advance!

[inspirit]

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

[JonElster]

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

[JonElster]

?

[JonElster]

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

[MarcPer]

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');