【图像处理篇】自动识别手写数字web应用05

mixlab

发布于 2018-04-17 14:44:19

1.4K0

发布于 2018-04-17 14:44:19

文章被收录于专栏：MixLab科技+设计实验室MixLab科技+设计实验室

往期的4篇已经把Docker+Keras+Flask+JS的全栈+深度学习介绍完整了：

自己动手做一个识别手写数字的web应用01

自己动手做一个识别手写数字的web应用02

自己动手做一个识别手写数字的web应用03

自己动手做一个识别手写数字的web应用04

今天更新一篇关于：图像处理。

再回顾下MNIST手写字数据集的特点：每个数据经过归一化处理，对应一张灰度图片，图片以像素的重心居中处理，28x28的尺寸。

上一篇文章中，对canvas手写对数字仅做了简单对居中处理，严格来说，应该做一个重心居中的处理。今天就介绍下：

如何实现前端的手写数字按重心居中处理成28x28的图片格式。

我们先把前端canvas中的手写数字处理成二值图，求重心主要运用了二值图的一阶矩，先来看下零阶矩：

二值图在某点上的灰度值只有0或者1两个值，因此零阶矩为二值图的白色面积总和。

只要把上文的公式转为JS代码，即可求出重心坐标：

SignaturePad.prototype.getGravityCenter = function() { 

 var w = this._ctx.canvas.width,
    h = this._ctx.canvas.height;  
 
 var mM = 0,
    mX = 0,
    mY = 0;  
 
var imgData = this._ctx.getImageData(0, 0, w, h); 
 
 
for (var i = 0; i < imgData.data.length; i += 4) {  

  var t = imgData.data[i + 3] / 255; 
  var pos = this.pixel2Pos(i);    
  
    mM = mM + t;
    mX = pos.x * t + mX;
    mY = pos.y * t + mY;
   
  };  
  
    
  var center = {
             x: mX / mM,
             y: mY / mM
               }  
  
    
    return center
     
};

pixel2Pos是我另外写的根据i求出点坐标的函数：

SignaturePad.prototype.pixel2Pos = function(p) {

  var w = this._ctx.canvas.width,
    h = this._ctx.canvas.height; 
  
   var y = Math.ceil((p + 1) / 4 / w);  
   var x = Math.ceil((p + 1) / 4 - (y - 1) * w); 
   
    return {
    x: x,
    y: y
  }
    
}

这里要注意下：

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：