Question

我有这样的图像：

（只是1和0的二进制图像）

......我想要得到这样的东西：

是否有效率＆amp;使用纯javascript快速删除图像中的小区域（1/0矩阵）？

这就是我的矩阵（从上图中生成）看起来像：

100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111010001111111111111111111111111111111111111111111011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110001101110
111111111111111111111111111111110011111111111111111111111111111111111111111111111111111111111111111111111111111110000011111111111111111111111111111111111111111111111111111111111111111111110100000000110
111111111111111111111111111000000000111111111111111111111111111111111111111111111111111111111111111111111111110000000000011111111111111111111111111111111111111111111111111111111111111111111000000000000
111111111111111111111111110000000000001111111111111111111111111111111111111111111111111111111111111111111111100000000000001111111111111111111111111111111111111111111111111111111111111111111000000000000
111111111111111111111111100000000000000111111111111111111111111111111111111111111111111111111111111111111111000000000000000111111111111111111111111111111111111111111111111111111111111111111000000000000
111111111111111111111111000000000000000011111111111111111111111111111111110000111111111111111111111111111110000000000000000011111111111111111111111111111110000000011111111111111111111111111000000000000
111111111111111111111110000000000010000011111111111111111111111111111110000000000111111111111111111111111100000000000000000011111111111111111111111111110000000000000111111111111111111111111000000000000
111111111111111111111100000000000000000001111111111111111111111111110000000000000001111111111111111111111100000000001000000001111111111111111111111111100000000000000011111111111111111111111000000000000
111111111111111111111100000010100001000001111111111111111111111111100000000000000000111111111111111111111100000000010001000001111111111111111111111111000001000000000001111111111111111111111100000000000
111111111111111111111100000000100110000001111111111111111111111111100000000000000000111111111111111111111000000000000010000001111111111111111111111111000000000000000000111111111111111111110100000000000
110111111111111111111100000001000000000001111111111111111111111111000000000000000000011111111111111111111000000000011000000001111111111111111111111110000000000000000000011111111111111111111100000000000
110111111111111111111100000000000010001000111111111111111111111111000000000010000000011111111111111111111000000000100000000000111111111111111111111110000000000000000000011111111111111111111100000000000
110111111111111111111000000000100000000000111111111111111111111110000000000000100000001111111111111111111000000100001000000000111111111111111111111110000000000000000000011111111111111111111100000000000
110111111111111111111100001000010011000000111111111111111111111110000000001000000010001111111111111111111000000000000000000000111111111111111111111110000000000000000000001111111111111111111000000010100
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111000000000000000000000111111111111111111111100000000000000000000101111111111111111111000000000010
110111111111111111111100000000000000000000111111111111111111111110000000000000011000001111111111111111111000000000000000000000111111111111111111111100000000000000000000001111111111111111111100000000010
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111000000000000000000000111111111111111111111100000000000000000000001110111111111111111100000000000
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111000000000000000000000111111111111111111111110000000000000000000011111111111111111111100000000010
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111100000000000000000000111111111111111111111101000000000000000000001111111111111111111000000001000
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111000000000000000000000111111111111111111111110000000000010000000001111111111111111111100000000000
110111111111111111111100000000000000010000111111111111111111111110000000000000000000001111111111111111111000000000000000000000111111111111111111111100000000000000000000001111111111111111111110000000010
110111111111111111111000000000000000000000011111111111111111111110000000000000000000000111111111111111111000000000000000000000111111111111111111111110000000000000000000001111111111111111111100000000000
110111111111111111111100000000000000000000111111111111111111111110000000000000000000000111111111111111111000000000000000000000111111111111111111111100000000001000000000001111111111111111111100000000000
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111000000000000000000000111111111111111111111101000000000000000000011101111111111111111100000000000
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111100000000000000000000111111111111111111111101100000000010000000001111111111111111111100000000000
110111111111111111111100000000000000000000111111111111111111111110000000000000000000001111111111111111111100000000000000000000111111111111111111111100000000000000000000001111111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111110000000000000000000000111111111111111111100000000000000000000111111111111111111111100000000011000000000011111111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111110100000000000000000000111111111111111111100000000000000000000111111111111111111111100000010000001010000111110111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111110000000000000000000001111111111111111111100000000000000000000111111111111111111111101000000000000000000101111111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111110000000000000000000001111111111111111111100000000000000000000111111111111111111111100000000100000000000001111111111111111111110000000000
110111111111111111111100000000000000000000011111111111111111111110000000000000000000000111111111111111111100000000000000000000011111111111111111111110000010000000000000001111111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111100000000000000000000000111111111111111111100000000000000000000011111111111111111111100001000000000000000001111111111111111111100000000010
110111111111111111111100000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111110000100000000000000101111111111111111111110000000010
110111111111111111111100000000000000000000011111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000010
110111111111111111111100000000000000000000011111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111100001000000000000000101111111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111110000000000000000000001110111111111111111100000000000
110111111111111111111100000000000000000000011111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111100000000100001010000011111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111100000000000000000000001111111111111111111110000001000000000000001111111111111111111100000000000010010000011111111111111111111110000000000000000000011111111111111111111110000000000
110111111111111111111100000000001000000000001111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111100001000000000000000001111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111110000000000000000000011111111111111111111110000000000
110111111111111111111100000000000000000000001111111111111111111110000000000000000000001111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111110000000000
110111111111111111111100000000000000000000001111111111111111111110000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111100000000000000000000001111111111111111111110000000000000000000001111111111111111111000000000000000000010001111111111111111111100000000000000000000011111111111111111111100000000010
110111111111111111111100000000000000000000000111111111111111111110000000000000000000001111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111100000000000000000000001111111111111111111110000000000000000000001111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111100001000000000000000001111111111111111111110000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000100
110111111111111111111100000000000000000000001111111111111111111110000000000000000000001111111111111111111100000000000000000000001111111111111111111100000000000000000000011110111111111111111101000000000
110111111111111111111110000000000000000000001111111111111111111110000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111110000000000000000000001111111111111111111110000000000000000000011111111111111111111100000000100000000000001111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111110000000000000000000001111111111111111111110000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111110000000000
110111111111111111111110000000000000000000000111111111111111111110000000000000000000011111111111111111111100000000000000000000001111111111111111111110000000000000000000011111111111111111111100000000000
110111111111111111111110000000000000000000000111111111111111111110000000000000000000011111111111111111111100000000000000000000011111111111111111111110000000000000000000011111111111111111111110000000000
110111111111111111111110000000000000000000000111111111111111111110000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111110000000100000000000000111111111111111111100000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111110000000000
110111111111111111111110000000000000000000000111111111111111111110000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000000000000011110111111111111111100000000000
110111111111111111111110000000000000000000001111111111111111111110000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000000000000011111111111111111111110000000000
110111111111111111111110000000000000000000000111111111111111111110000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111110000000000000000000000111111111111111111110000000000000000000011111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000010
110111111111111111111110000000110001011000000111111111111111111110000000001000000000011111111111111111111100000000000000000000001111111111111111111100000000000000000000011111111111111111111100000000000
110111111111111111111110000000000000000000000111111111111111111110000000000000000000011111111111111111111100000000000010000000001111111111111111111100000000000000000000011111111111111111111110000000000
110111111111111111111111000000110001011000000111111111111111111110000001000000000000011111111111111111111100000000000000011010001111111111111111111100000000000000000000011111111111111111111110000000000
111111111111111111111111000000000010100000001111111111111111111110000000000100000000011111111111111111111110000000000000000100011111111111111111111100000000000000000000011111111111111111111110000000000
111111111111111111111111000000000100000000001111111111111111111110000000000110000000011111111111111111111110000000000100000000011111111111111111111100000000000000000000011111111111111111111100000000000
111111111111111111111111000000000000000000001111111111111111111110000000011000010000011111111111111111111110000000000000000000011111111111111111111100000000000000000000011111111111111111111110000000010
111111111111111111111111100000000000001000011111111111111111111110000000000001101100011111111111111111111111000000000000000000111111111111111111111110000000000000000000111111111111111111111110000000000
111111111111111111111111110000000000000000011111111111111111111110000000100001000000111111111111111111111111100000000000000001111111111111111111111110000000000000000000111111111111111111111100000001000
111111111111111111111111110000000000000000111111111111111111111111000000000000000000111111111111111111111111110000000000000001111111111111111111111111000000000000000001111111111111111111111100000000000
111111111111111111111111111100000000000011111111111111111111111111000000000001000000111111111111111111111111111000000000000111111111111111111111111111000000001000001001111111111111111111111110000000000
111111111111111111111111111110000000001111111111111111111111111111100000000000000001111111111111111111111111111110000000011111111111111111111111111111100000000000000011111111111111111111111110000000000
111111111111111111111111111111111111111111111111111111111111111111110000000000000011111111111111111111111111111111111111111111111111111111111111111111110000000000000111111111111111111111111110000000000
111111111111111111111111111111111111111111111111111111111111111111111000000000000111111111111111111111111111111111111111111111111111111111111111111111111000000001001111111111111111111111111110000000000
111111111111111111111111111111111111111111111111111111111111111111111100000000001111111111111111111111111111111111111111111111111111111111111111111111111111100011111111111111111111111111111110000000000
111111111111111011111111111111111111111111111111111111111111111111111111000001111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111100000000010
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110000011110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110
100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

此问题是对此处JAVA based question的修改。

这是象征着我的想法的另一幅画面！

Answer 1

我不知道它是否符合您的需求，但中值过滤器可能是一个很好的起点。

注意：此示例使用node-imagemagick（加NodeJs）并需要ImageMagick CLI。

使用以下命令从命令行安装node-imagemagick：

npm install imagemagick

然后将中位数-median过滤器应用于image.png radius = 5，并使用以下代码保存过滤后的图片：

var path = require('path');
var im = require('imagemagick');
var radius = 5;
im.convert([path.join(__dirname +'/image.png'), '-median', radius , path.join(__dirname +'/image'+radius+'.png')], 
   function(err, stdout){
     if (err) throw err;
});

半径值

我为＆＃34; radius＆＃34;尝试了不同的值，6-8之间的数字看起来最合适。

var path = require('path');
var im = require('imagemagick');

var radiuses = [2,4,6,8];

radiuses.forEach((radius) => {
   im.convert([path.join(__dirname +'/image.png'), '-median', radius, path.join(__dirname +'/image'+radius+'.png')], 
    function(err, stdout){
      if (err) throw err;
    });
  });

结果＃1：Link

结果＃2：Link

平原JS

const medianFilter = (image, radius) => {
  let width = image.width;
  let height = image.height;
  var input = image.getImageData(0, 0, image.width, image.height).data;
  var output = input;
  for (var x = 0; x < width; x++) {
      for (var y = 0; y < height; y++) {
          var index = (x + y * width) * 4;  //Get a pixel index in a 1D array 
          var bufferRed = [];
          var bufferGreen = [];
          var bufferYellow = [];
          var bufferAlpha = [];
          for (var cx = 0; cx < radius; cx++) {
              for (var cy = 0; cy < radius; cy++) {
                  if (x + cx < width && y + cy < height) {
                      var idx = (x + cx + (y + cy) * width) * 4;  //Get a pixel index inside a radius*radius square
                      bufferRed.push(input[idx]);
                      bufferGreen.push(input[idx + 1]);
                      bufferYellow.push(input[idx + 2]);
                      bufferAlpha.push(input[idx + 3]);
                  }
              }
          }
          output[index] = median(bufferRed.sort());
          output[index + 1] = median(bufferGreen.sort());
          output[index + 2] = median(bufferYellow.sort());
          output[index + 3] = median(bufferAlpha.sort());
      }
  }
 return output;
}

没有节点的完整示例

<html>
<head>
    <meta charset="UTF-8">
</head>

<body>
<canvas id="src" width="1305" height="569"></canvas>
<canvas id="dest" width="1305" height="569"></canvas>

<script type="text/javascript">
    var ctx = document.getElementById('src').getContext("2d");
    var img = new Image();

    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        ctx.width = img.width;
        ctx.height = img.height;
        var output = medianFilter(ctx, 7);
        var ctx2 = document.getElementById('dest').getContext("2d");
        var imageData = new ImageData(output, img.width, img.height);
        ctx2.putImageData(imageData, 0, 0);
    };

    img.src = 'image.png';


    function median(numbers) {
        var median = 0,
            numsLen = numbers.length;
        numbers.sort();

        if (
            numsLen % 2 === 0
        ) {
            median = (numbers[numsLen / 2 - 1] + numbers[numsLen / 2]) / 2;
        } else {
            median = numbers[(numsLen - 1) / 2];
        }

        return median;
    }

    const medianFilter = (image, radius) => {
        let width = image.width;
        let height = image.height;
        var input = image.getImageData(0, 0, image.width, image.height).data;
        var output = input;
        for (var x = 0; x < width; x++) {
            for (var y = 0; y < height; y++) {
                var index = (x + y * width) * 4;
                var bufferRed = [];
                var bufferGreen = [];
                var bufferYellow = [];
                var bufferAlpha = [];
                for (var cx = 0; cx < radius; cx++) {
                    for (var cy = 0; cy < radius; cy++) {
                        if (x + cx < width && y + cy < height) {
                            var idx = (x + cx + (y + cy) * width) * 4;
                            bufferRed.push(input[idx]);
                            bufferGreen.push(input[idx + 1]);
                            bufferYellow.push(input[idx + 2]);
                            bufferAlpha.push(input[idx + 3]);
                        }
                    }
                }
                output[index] = median(bufferRed.sort());
                output[index + 1] = median(bufferGreen.sort());
                output[index + 2] = median(bufferYellow.sort());
                output[index + 3] = median(bufferAlpha.sort());
            }
        }
        return output;
    }
</script>
</body>
</html>

免责声明：Median Function，What are the mean and median filters?

从二进制图像中删除小区域的方法：Javascript

1 个答案:

半径值

平原JS

没有节点的完整示例