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

往期的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 值:

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)

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

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

今天就到这里。

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2017-12-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

利用向量积(叉积)计算三角形的面积和多边形的面积

利用向量积(叉积)计算三角形的面积和多边形的面积: 向量的数量积和向量积: (1)  向量的数量积 ? (1)  向量的向量积 两个向量a和b的叉积(向量积)可...

47990
来自专栏PPV课数据科学社区

数据挖掘知识脉络与资源整理(九)–柱形图

? 柱形图 简介 英文:histogram或者column diagram 排列在工作表的列或行中的数据可以绘制到柱形图中。在柱形图中,通常沿水平轴组织类别,...

322100
来自专栏深度学习自然语言处理

【概率笔记】条件概率这样学才快啦

比如,一个上学期间整天鬼混的学沫,根本就不好好学习,对于他而言,选择题的四个选项ABCD被他选取的概率就为1/4。而对于大学霸来说,题题都会,那么他选取每一个选...

11630
来自专栏黄成甲

数据分析之数据处理

数据处理是根据数据分析目的,将收集到的数据,用适当的处理方法进行加工、整理,形成适合数据分析的要求样式,它是数据分析前必不可少的工作,并且在整个数据分析工作量中...

21520
来自专栏WOLFRAM

五形相生

在三维欧氏空间里,有且仅有五种正多面体:正四面体、立方体、正八面体、正十二面体、正二十面体。一般介绍正多面体的文献中,只会强调立方体和正四面体互为对偶,正十二面...

15440
来自专栏用户2442861的专栏

几种常见计算机图像处理操作的原理及canvas实现

即使没有计算机图形学基础知识的读者也完全不用担心您是否适合阅读此文,本文的性质属于科普文章,将为您揭开诸如Photoshop、Fireworks、GIMP等软...

21710
来自专栏一个会写诗的程序员的博客

勾股定理·圓周率·無窮級數·微積分勾股定理圓圓周率定义1定义2定义3代数数学分析数论概率论统计学圆的内接正多边形和外接正多边形歐拉公式三角函數分析微積分宇宙運行軌道萬有引力定律電磁場方程相對論量子力學

量子力学理论在20世纪初期诞生,而沃利斯圆周率公式已经存在了数百年,但这两者之间的内在关联直到今天才被发现。

11210
来自专栏Vamei实验室

概率论01 计数

概率 概率论研究随机事件。它源于赌徒的研究。赌博中有许多随机事件,比如投掷一个骰子,是否只凭运气呢? 赌徒逐渐发现随机事件的规律。投掷两个骰子是常见的赌博游戏。...

24660
来自专栏PPV课数据科学社区

【大数据问答】SPSS是如何做到发现数据质量问题,例如,如何发现缺失值?

SPSS是如何做到发现数据质量问题,例如,如何发现缺失值? (1)系统缺失值、空白值 每一个变量均有可能出现系统缺失或者空白,当数据量巨大时我们根本无法用眼睛...

44840
来自专栏一“技”之长

Cocos2d-x-v3坐标体系 原

        cocos2d引擎是一款非常优秀的扩平台的游戏开发引擎,在apple游戏榜上,有很多排名靠前的游戏都是由他创造出来的,他也有一套十分方便的坐标体...

6320

扫码关注云+社区

领取腾讯云代金券