Canvas对图片进行像素类型坐标化

好久没有写博客，正好借此写下最近遇到的一个问题，慢慢把写博客的习惯捡起来，哈哈！

问题：给一个图片，把这张图片进行坐标化，并且 在生成的二位坐标系上标记出每个坐标点所属的类型。

这样说好像有点难理解，我都有点小迷啦…直接上图…

这张图有一个应用就是，在海域上有一艘船，船肯定必须在水上啦，所以对船来说陆地就是船的障碍物，所以目标就是把图片进行坐标化，然后在二维坐标上标记出障碍物的位置，这样就可以在给定船一个起始和结束坐标时，可以让船避开障碍物进行移动

刚看到这个需求，还没有思路，就让UI直接把这张图网格化，然后我自己再根据图片上的小格子里面是陆地还是海洋来一一进行人工标记坐标

没标记多久就觉得这…这要是标记完眼都TM得累死啦，而且要是换张图片呢，这不是直接炸锅…幸好有我大H5帮我解决这个问题，Ok，来慢慢分析一下：

先确定一下要解决的几个问题:

• 如何确定哪一个位置是陆地还是海洋
• 如何把图片进行坐标化
• 如果不光要区别分陆地、海洋，还有暴风、旋涡等多种类型

思路：

• 第一个问题，可以利用图片像素点来解决，不同的类型关键就在于像素的RGBA不同，只要我们能拿到图片中像素的数据就可以找出每一个像素所属的类型，难点就在于RGBA四个值的阈值设置。
• 第二个问题，我们可以自己设计一个比例来进行坐标化，比如1920 * 1080像素的图片，我们可以按100 * 100来进行坐标化，那么每一个格子所占的像素点数就知道啦，然后这个格子中不同类型所占的像素个数也知道，我的做法是取类型个数最多为这个格子最终的类型，但是你也可以有自己的算法来找出最终的类型（按百分比什么的度都可以）。
• 第三个问题主要就是代码层次上面的，需要代码健壮性和扩展性要强

上面问题和思路说的差不多啦（感觉上面说的有点啰嗦…），主要就是利用H5的Canvas来进行处理的，下面直接上代码

/**
 * 把图片进行网格化，然后根据像素值求出每一个格子对应的类型，最后返回一个二维数组
 */
class TypesFromPicture {
   

  constructor(canvas, types, threshold) {
    this.canvas = canvas;
    this.types = types;
    this.threshold = threshold;
  }

  /**
   * [calTypesFromPixels 计算所有像素点所属的类型]
   * @param  {[type]} pixels [所有像素点数据]
   * @return {[type]}        [所有像素点所属的类型数组]]
   */
  calTypesFromPixels(pixels) {

    let types_data = new Array();

    let len = pixels.length;
    for (let i = 0; i < len; i += 4) {
      types_data[i / 4] = this.calTypeFromPixel(pixels.slice(i, i + 4));
    }
    return types_data;

  }