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

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

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

再回顾下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 值：

• R - 红色 (0-255)

• G - 绿色 (0-255)

• B - 蓝色 (0-255)

• A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

根据以上的代码就可以找出重心，如下图红点所示位置：

以重心为中心，把数字放置于28x28的正方形中，剪切出来，传给后端即可。

今天就到这里。

  近期热文：

---

码字不易，开启新的打赏方式：

---

本公众号定期更新关于

设计师、程序员发挥创意

互相融合的指南、作品。

主要技术栈：

nodejs、react native、electron

Elasticsearch

Solidity

Keras

欢迎关注，转发～

欢迎长按二维码

关注本号