Changing Colorspaces With OpenCV and Openlayers

Article Number : 4

The color space feature, along with the minimum and maximum values of red, green, and blue color tones, enables you to filter colors within a specific range and represent them as either black or white. As a result, you can use this functionality to enhance visibility in processes where you want to filter colors within a known range, allowing for clearer visualization.

I have added this feature as a tool to the GISLayer software for illustrating it with examples. If you’d like to use it, please follow the steps below:

1. Go to https://editor.gislayer.com/ and log in or create an account
2. Navigate to the ‘Image Processing’ tab in the top menu
3. You can either add the desired layers to the system or work on a single layer
4. Click on the ‘Color Range’ button to open the panel
5. Activate the analysis and adjust the input ranges in the panel according to your preferences.

While performing these steps, the analysis output will be visible on the right-hand side.

It’s not just about a single image process; you can apply multiple processing steps consecutively. This way, you’ll reach the results of your analysis more quickly and systematically. In this example, you’ll notice that buildings and roads appear in black, while green and blue areas are nearly absent on the map.

Keep in mind that this relationship could vary based on your own map’s characteristics.

Now, how can we implement this on our own codebase? To help you with this, I’ve prepared a JavaScript class. To use this class, you need to have OpenCV and OpenLayers integrated. The process is quite straightforward. The system will automatically reduce the width of the map by half and create a canvas on the right side.

To examine the GitHub code, click here.

Core Class File

Important Function Is runColorSpace you can find in OCV.js File

runColorSpace(s){
    let src = cv.matFromImageData(this.imageData);
    let dst = new cv.Mat();
    let low = new cv.Mat(src.rows, src.cols, src.type(), [s.low.red, s.low.green, s.low.blue, 0]);
    let high = new cv.Mat(src.rows, src.cols, src.type(), [s.high.red, s.high.green, s.high.blue, 255]);
    cv.inRange(src, low, high, dst);
    cv.imshow(this.id, dst);
    src.delete(); dst.delete(); low.delete(); high.delete();
  }

How You can use With OCV.js File

var globalOCV;

function runColorSpaces(){
  var settings = {
    low:{
      red:0,
      green:0,
      blue:0
    },
    high:{
      red:150,
      green:150,
      blue:150
    }
  };
  globalOCV = new OCV('map','colorspaces',map,'openlayers');
  globalOCV.start();
  globalOCV.setColorSpace(true,settings);
}

function stopColorSpaces(){
  globalOCV.setColorSpace(false);
  globalOCV.close();
}

Click Project or Click Sample