Image segmentation not working in Paper.js

Question

I'm trying to perform image segmentation in Paper.js by loading an image, converting it to grayscale, creating a binary mask using a threshold, and then applying a polygon path as a clipping mask to the image. However, the resulting image is not being rendered and segementation not visible.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image Segmentation</title>
    <script src="https://unpkg.com/paper"></script>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Load the image
        var raster = new Raster({
            source: 'https://preview.redd.it/c6zgmznb0vz91.png?width=640&crop=smart&auto=webp&s=90c8eeda74e3edc2fd0c7891a79077b9378d50e0',
            position: view.center
        });

        // Convert the image to grayscale
        raster.grayscale();

        // Apply a threshold to the grayscale image to create a binary mask
        raster.threshold(0.5);

        // Define the segmentation coordinates
        var coordinates = [
            [50, 150],
            [100, 100],
            [150, 150],
            [200, 100],
            [250, 150],
            [200, 200],
            [150, 250],
            [100, 200]
        ];

        // Create a polygon path from the coordinates
        var path = new Path();
        path.closed = true;
        for (var i = 0; i < coordinates.length; i++) {
            var point = new Point(coordinates[i]);
            path.add(point);
        }

        // Apply the path as a clipping mask to the image
        raster.clipped = true;
        raster.clipMask = path;

        // Refresh the view
        view.draw();
    </script>
</body>
</html>

i need to render segmentation on images or videos dynamically based on the coordinates from the backend API, i tried to use paper js, but it is not working as i expected ,ThankYou in advance

Image segmentation not working in Paper.js

0 Answers0