How to run canny edge detection in gammacv as a webpage?

Question

How to run canny edge detection in gammacv as a webpage?

jeremydeanw opened this issue 2 years ago · 1 comments

Hey there, im trying to figure out how to do some basic shape detection using gammacv, but its not working for me.
I downloaded the latest gammacv.js and put it in the same folder as my html file.
Probably an easy fix, or my lack of understanding. Can I run gammacv this way?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Rectangle Detection</title>
  </head>
  <body>
    <input type="file" accept="image/*" onchange="detectRectangle(this.files[0])" />
    <br />
    <img id="image" />
    <br />
    <canvas id="canvas"></canvas>
    <script src="gammacv.js"></script>
    <script>
      // Define detectRectangle as a global function
      async function detectRectangle(file) {
        // Read the image file as a data URL
        const image = document.getElementById('image');
        const reader = new FileReader();
        reader.onload = () => {
          image.onload = async () => {
            // Create a canvas element to draw the image
            const canvas = document.getElementById('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);

        // Convert the image to grayscale
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const gray = GammaCV.Image.fromImageData(imageData).convert(GammaCV.CV_8U, { alpha: 0.5 }).cvtColor(GammaCV.COLOR_BGR2GRAY);

        // Detect edges in the image using the Canny algorithm
        const edges = await GammaCV.cannyEdges(gray, {
          lowThreshold: 50,
          highThreshold: 150,
          blur: 3,
        });

        // Find contours in the edge image
        const contours = edges.findContours(GammaCV.RETR_EXTERNAL, GammaCV.CHAIN_APPROX_SIMPLE);

        // Find the largest rectangle contour
        let largestArea = 0;
        let largestContour = null;
        for (const contour of contours) {
          const area = contour.area();
          if (area > largestArea) {
            largestArea = area;
            largestContour = contour;
          }
        }

        // Draw the rectangle contour on the canvas
        if (largestContour) {
          const rect = largestContour.minAreaRect();
          ctx.strokeStyle = 'green';
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.moveTo(rect.points[0].x, rect.points[0].y);
          ctx.lineTo(rect.points[1].x, rect.points[1].y);
          ctx.lineTo(rect.points[2].x, rect.points[2].y);
          ctx.lineTo(rect.points[3].x, rect.points[3].y);
          ctx.closePath();
          ctx.stroke();
        }
      };
      image.src = reader.result;
    };
    reader.readAsDataURL(file);
  }

  window.onload = function() {
    // Do any other initialization here
  };
</script>

Answer 1 · 2023-03-28T17:22:05.000Z

Hi @jeremydeanw. The sample code you provided has nothing in common with the GammaCV library. It seems to have more common with OpenCV.

To use GammaCV in a proper way, please check out docs, there is a sample for cannyEdges operation right on the Get Started page.

You also may find useful articles made by the community, for example, https://piotrjaworski.medium.com/gammacv-a-simple-custom-operation-example-b502d9365b0e.

Have successful experiments!