往期的4篇已经把Docker Keras Flask JS的全栈 深度学习介绍完整了：
自己动手做一个识别手写数字的web应用01
自己动手做一个识别手写数字的web应用02
自己动手做一个识别手写数字的web应用03
自己动手做一个识别手写数字的web应用04
今天更新一篇关于：图像处理。
再回顾下MNIST手写字数据集的特点：每个数据经过归一化处理，对应一张灰度图片，图片以像素的重心居中处理，28x28的尺寸。
上一篇文章中，对canvas手写对数字仅做了简单对居中处理，严格来说，应该做一个重心居中的处理。今天就介绍下：
如何实现前端的手写数字按重心居中处理成28x28的图片格式。
我们先把前端canvas中的手写数字处理成二值图，求重心主要运用了二值图的一阶矩，先来看下零阶矩：
二值图在某点上的灰度值只有0或者1两个值，因此零阶矩为二值图的白色面积总和。
只要把上文的公式转为JS代码，即可求出重心坐标：
代码语言：javascript复制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求出点坐标的函数：
代码语言：javascript复制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的正方形中，剪切出来，传给后端即可。
今天就到这里。
