Question

我见过人们尝试使用php从波形图像中提取数据，但是这个或者有没有人使用HTML5画布实现它？

Answer 1

您可以使用ImageData检查每一行，每列或每个像素。您需要使用：

var ctx = canvas.getContext("2d"); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

图像数据是r，g，b和像素值的数组，因此画布上的第一个像素位于索引0（r），1（g），2（b）和3（a）。

Answer 2

您可以使用Marching Squares算法沿表示波形的图像获取一组点。

优秀的d3库有一个plug-in来实现Marching Squares。

插件可以在d3外单独使用，以设置波形轮廓点。

(function() {

d3.geom.contour = function(grid, start) {
  var s = start || d3_geom_contourStart(grid), // starting point
      c = [],    // contour polygon
      x = s[0],  // current x position
      y = s[1],  // current y position
      dx = 0,    // next x direction
      dy = 0,    // next y direction
      pdx = NaN, // previous x direction
      pdy = NaN, // previous y direction
      i = 0;

  do {
    // determine marching squares index
    i = 0;
    if (grid(x-1, y-1)) i += 1;
    if (grid(x,   y-1)) i += 2;
    if (grid(x-1, y  )) i += 4;
    if (grid(x,   y  )) i += 8;

    // determine next direction
    if (i === 6) {
      dx = pdy === -1 ? -1 : 1;
      dy = 0;
    } else if (i === 9) {
      dx = 0;
      dy = pdx === 1 ? -1 : 1;
    } else {
      dx = d3_geom_contourDx[i];
      dy = d3_geom_contourDy[i];
    }

    // update contour polygon
    if (dx != pdx && dy != pdy) {
      c.push([x, y]);
      pdx = dx;
      pdy = dy;
    }

    x += dx;
    y += dy;
  } while (s[0] != x || s[1] != y);

  return c;
};

// lookup tables for marching directions
var d3_geom_contourDx = [1, 0, 1, 1,-1, 0,-1, 1,0, 0,0,0,-1, 0,-1,NaN],
    d3_geom_contourDy = [0,-1, 0, 0, 0,-1, 0, 0,1,-1,1,1, 0,-1, 0,NaN];

function d3_geom_contourStart(grid) {
  var x = 0,
      y = 0;

  // search for a starting point; begin at origin
  // and proceed along outward-expanding diagonals
  while (true) {
    if (grid(x,y)) {
      return [x,y];
    }
    if (x === 0) {
      x = y + 1;
      y = 0;
    } else {
      x = x - 1;
      y = y + 1;
    }
  }
}

})();

版权所有（c）2012-2014，Michael Bostock保留所有权利。

以源或二进制形式重新分发和使用，有或没有   如果满足以下条件，则允许修改   满足：



源代码的再分发必须保留上述版权声明，此条件列表和以下免责声明。



二进制形式的再分发必须复制上述版权声明，此条件清单和以下免责声明   随分发提供的文件和/或其他材料。



未经事先书面规定，Michael Bostock名称不得用于支持或宣传从该软件衍生的产品   权限。



本软件由版权所有者和贡献者提供   ＆＃34;原样＆＃34;以及任何明示或暗示的保证，包括但不包括   仅限于对适销性和适用性的暗示保证   特别的目的是免责声明。在任何情况下都不应该是迈克尔博斯托克   对任何直接，间接，偶然，特殊，惩戒，或任何责任   间接损害（包括但不限于，采购）   替代商品或服务;损失使用，数据或利润;要么   商业中断）但不论是否有任何责任理论，   无论是合同，严格责任还是侵权（包括疏忽）   或以其他方式）以任何方式使用本软件，即使   如果被告知这种损害的可能性。

使用HTML5画布从波形图像中提取波形数据

2 个答案: