Javascript:快速将彩色图像转换为零和1的方法

时间:2017-12-03 10:33:54

标签: javascript jquery image matrix converter

我试图转换像这样的彩色图像......

image 1


...进入一个零和一个零的矩阵,得到这样的结果:

0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000001111110000000000000000
0000000000000000000000000000000000000000000000000001111110000000000000000
0000000000000000000000000000000000000000000000000000111110000000000000000
0000000000000000000000000000000000000000000000000000111110000000000000000
0000000000000000000000000000000000000000000000000000111110000000000000000
0000000000000000000000000000000000000000110000000000111111000000000000000
0000000000000000000000000000000000000011110000000000111111000000000000000
0000000000000000000000000000000000000111111000000000011111000000000000000
0000000000000000000000000000000000000111111100000000011111000000000000000
0000000000000000000000000000000000000011111100000000011111000000000000000
0000000000000000000000000000000000000011111110000000011111000000000000000
0000000000000000000000000000000000000001111111000000011111100000000000000
0000000000000000000000000000000000000000111111000000011111100000000000000
0000000000000000000000000000000000000000011111100000001111100000000000000
0000000000000000000000000000000000000000011111110000001111100000000000000
0000000000000000000000000000000000000000001111110000001111100000000000000
0000000000000000000000000000100000000000000111111000001111100000000000000
0000000000000000000000000000111000000000000111111100001111110000000000000
0000000000000000000000000001111110000000000011111100001111110000000000000
0000000000000000000000000011111111000000000001111110000111110000000000000
0000000000000000000000000011111111110000000001111111000111110000000000000
0000000000000000000000000001111111111100000000111111000111110000000000000
0000000000000000000000000000011111111110000000011111100111111000000000000
0000000000000000000000000000000111111111100000011111110111111000000000000
0000000000000000000000000000000011111111111000001111110000000000000000000
0000000000000000000000000000000000111111111110000111110000000000000000000
0000000000000000000000000000000000001111111111000111000000000000000000000
0000000000000000000000000000000000000111111111110010000000000000000000000
0000000000000000000000011000000000000001111111111000000000000000000000000
0000000000000000000000111111000000000000011111111000000000000000000000000
0000000000000000000000111111111100000000000111110000000000000000000000000
0000000000000000000000111111111111110000000011110000000000000000000000000
0000000000000000000000111111111111111111000000100000000000000000000000000
0000000000000000000000011111111111111111111000000000000000000000000000000
0000000000000000000000000011111111111111111111000000000000000000000000000
0000000000000000000000000000001111111111111111000000000000000000000000000
0000000000001111000000000000000000111111111111001111100000000000000000000
0000000000001111000000000000000000000011111111001111100000000000000000000
0000000000001111000000000000000000000000011110001111100000000000000000000
0000000000001111000011111110000000000000000000001111100000000000000000000
0000000000001111000011111111111111111000000000001111100000000000000000000
0000000000001111000011111111111111111111111110001111100000000000000000000
0000000000001111000011111111111111111111111110001111100000000000000000000
0000000000001111000011111111111111111111111110001111100000000000000000000
0000000000001111000000011111111111111111111110001111100000000000000000000
0000000000001111000000000000000000111111111100001111100000000000000000000
0000000000001111000000000000000000000000000000001111100000000000000000000
0000000000001111000000000000000000000000000000001111100000000000000000000
0000000000001111000011111111111111111111111100001111100000000000000000000
0000000000001111000011111111111111111111111100001111100000000000000000000
0000000000001111000011111111111111111111111100001111100000000000000000000
0000000000001111000011111111111111111111111100001111100000000000000000000
0000000000001111000011111111111111111111111100001111100000000000000000000
0000000000001111000000000000000000000000000000001111100000000000000000000
0000000000001111000000000000000000000000000000001111100000000000000000000
0000000000001111000000000000000000000000000000001111100000000000000000000
0000000000001111000000000000000000000000000000001111100000000000000000000
0000000000001111111111111111111111111111111111111111100000000000000000000
0000000000001111111111111111111111111111111111111111100000000000000000000
0000000000001111111111111111111111111111111111111111100000000000000000000
0000000000001111111111111111111111111111111111111111100000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000

所以我开发了这段代码以获得如上所示的结果:

  

你可以在这里找到一个小提琴(当我尝试将代码添加为StackOverflow-CodeSnippet / jsfiddle时出现安全性错误) fiddle Link

Element.prototype.ImageTo2Bit = function() {
  var img = this,canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');
  ctx.width = canvas.width = img.width;
  ctx.height = canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width , img.height);
  var image_data = ctx.getImageData(0, 0, img.width, img.height).data;
  console.log(image_data);
  var result=[];
  for(var i = 0; i < image_data.length; i=i+4){
    var luma = 0.2126 * image_data[i] + 0.7152 * image_data[i+1] + 0.0722 * image_data[i+2];
    if (luma > 200) result.push('1');
    else result.push('0');
  }
  var array=listToMatrix(result,img.width).map(a => [a.join('')]);
  array = array.concat.apply([],array);
  return array.join('\n');
};


function listToMatrix(list, elementsPerSubArray) {
    var matrix = [], i, k;
    for (i = 0, k = -1; i < list.length; i++) {
        if (i % elementsPerSubArray === 0) {
            k++;
            matrix[k] = [];
        } matrix[k].push(list[i]);
    } return matrix;
}

var img = new Image();
img.src= 'https://i.stack.imgur.com/EPDlQ.png';
img.onload = function() {
  img.width=Math.round(img.width/7);
  img.height=Math.round(img.height/7);
  console.log(img.ImageTo2Bit());
};

然而,对我而言,代码工作正常,但我想加快代码在较大的图片上,因为它需要 LONG而

是否有一些替代方法可以将大图像(宽度:2000,高度:1500)转换为2位图像(零和1)到上面的代码?

也许一个更快的js插件可以完成这项工作!

我希望有人可以帮助我,谢谢!

0 个答案:

没有答案