注意只针对简单验证码（仅仅数字和英文字母，方向不变并且噪点较少）

获取特征

• 通过canvas获取页面图片
• 切割每一个字符获取元数据(一维数组rgba)
• 灰度化+二值化获取每个像素点的信息
• 提取可能出现的所有字符的特征信息

目标识别

• 通过canvas获取页面图片
• 切割每一个字符获取元数据(一维数组rgba)
• 灰度化+二值化获取每个像素点的信息
• 匹配当前的特征信息和已有记录
• 取最大匹配作为当前的识别结果

识别代码

//获取目标图片
let image = document.querySelector("#form1 img");
//创建canvas
let canvas = document.createElement("canvas");
//获取2d上下文
let ctx = canvas.getContext("2d");
//获取的特征信息 0-9
let feature = [
  "111100011110000001110011000100011000110111000000111000000111000000111001000110001000110001100000011110001111111111111111111111111111111111111111000000000000000000000000000",
  "111111001111100001111000001100000011100110011111100011111100011111100111111100111111000111111000111011001111111111111111111111111111111111111111000000000000000000000000000",
  "111000011110000001100011000100011000111111001111110001111100011111000111110001111100011010000000001000000001111111111111111111110111111111111111000000000000000000000000000",
  "111000011110000001110011000111111000111111001111100011111100011111110001111111001001110001000000011100000111111111111111111111111111111111111111000000000000000000000000000",
  "111111000111110001111110001111100001111000001110010011100010011000110011000000000000000001111100111111100111111111111111111111111111111111111111000000000000000000000000000",
  "100000000110010000110011111100011111100000011100000001100110001111111001000111001000110001100000011110000111111111110111111111111111111111111111000000000000000000000000000",
  "111100011110000001110011001100011111100000011100000001100011001100111001100111001100110001100000011110000111111111111111111110111111110111111111000000000000000000000000000",
  "100000000100000000111111000111110001111100011111100111111000111111001111110001111110011111110011011100011111111111111111111111111111111111111111000000000000000000000000000",
  "111000011110000001100011000100111000100011001110000011100000011100110001000111001000110001100000011110000111111111111111111111111111111111111111000000000000000000000000000",
  "111000011110000001100011001100111000100111000100111000100000001110000001111110001000110111000000011100001111111111111111111111111111111111111111000000000000000000000000000"
];
//结果容器
let codeArr = [];
//canvas大小设置为图片大小
canvas.width = image.width;
canvas.height = image.height;
//canvas插入到页面
document.body.appendChild(canvas);
//将图片绘制到canvas
ctx.drawImage(image, 0, 0);
//切割5个字符
for (let idx = 0; idx < 5; idx++) {
  //getImageData(x,y,width,height)
  //获取特定区域的图片的一维数据 每4个为一个像素点(分别为rgba)
  let pixels = ctx.getImageData(9 * idx + 6, 6, 9, 19).data;
  //当前字符的特征容器
  let currArr = [];
  //i+=4 rgba
  for (let i = 0, length = pixels.length; i < length; i += 4) {
    // 获取当前像素点的二值信息
    currArr.push(
      pixels[i] * 0.3 + pixels[i + 1] * 0.59 + pixels[i + 2] * 0.11 >= 128
        ? "1"
        : "0"
    );
  }
  //遍历已有的特征信息
  //返回每个特征信息的对应索引的匹配度
  //eg 10010111
  //   10101010
  //对应位置相同的个数当前为016三个位置则返回3
  let curr = feature.map(function(val) {
    return currArr.filter(function(v, index) {
      return val[index] === v;
    }).length;
  });
  //获取最大匹配度并把识别的字符保存到容器
  //Math.max.apply(null, curr) 获取curr中最大的数
  codeArr.push(curr.indexOf(Math.max.apply(null, curr)));
}
let code = codeArr.join("");
console.log(code);
//把识别的值写入输入框
document.querySelector("#CheckCode").value = code;