Selfie segmentation, camera utils and screenshot

TensorFlow General Discussion
1

Hey folks,

I got the following piece of code that applies segmentation to the webcam and blur the background, but I need to, given an eventListener trigger, to take a screenshot of the canvas (with the blurred background).

This is my code:

const canvasElement = document.getElementById('canvas');
const canvasCtx = canvasElement.getContext('2d');

function onResults(results) {
    canvasCtx.save();
    canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
    canvasCtx.filter = "blur()"

    canvasCtx.drawImage(results.segmentationMask, 0, 0,
        canvasElement.width, canvasElement.height);

    // Only overwrite existing pixels.
    canvasCtx.globalCompositeOperation = 'source-in';
    canvasCtx.drawImage(
        results.image, 0, 0, canvasElement.width, canvasElement.height);

    // Only overwrite missing pixels.
    canvasCtx.globalCompositeOperation = 'destination-atop';
    canvasCtx.filter = "blur(20px)"

    canvasCtx.drawImage(
        results.image, 0, 0, canvasElement.width, canvasElement.height);
    canvasCtx.restore();
}

const selfieSegmentation = new SelfieSegmentation({
    locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;
    }
});

selfieSegmentation.setOptions({
    modelSelection: 1,
});

selfieSegmentation.onResults(onResults);

camera = new Camera(videoElement, {
    onFrame: async () => {
        await selfieSegmentation.send({image: videoElement});
    },
    width: 1200,
    height: 1000
});

camera.start();```

I'm trying to capture the screenshot with the following:

`const data = canvas.toDataURL("image/png");` but the image is not correct. I cannot save it to file or use it as blob. What am I missing here?