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

Extract wave data from wave form image using HTML5 canvas

本文关键字：提取 数据 图像 波形图 HTML5 波形 使用      更新时间：2023-09-26

我看到人们试图使用php从波形图像中提取数据，但这可以或有任何人使用HTML5画布实现它吗?

可以使用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)。

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

优秀的d3库有一个实现行军广场的插件。

插件可以在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;
    }
  }
}
})();

Michael Bostock版权所有2012-2014

以源代码和二进制形式重新分发和使用，带或不带在满足以下条件的情况下，允许修改遇见:

  • 重新发布源代码必须保留上述版权声明、本条件列表和以下免责声明。

  • 以二进制形式重新发布必须复制上述版权声明，本条件列表和以下免责声明中的

  • Michael Bostock这个名字在没有事先明确书面的情况下，不得用于认可或推广源自本软件的产品许可。

这个软件是由版权所有者和贡献者提供的以及任何明示或暗示的保证，包括但不包括限于对适销性和适用性的默示保证一个特定的目的被否认。无论如何迈克尔·博斯托克对任何直接的，间接的，偶然的，特殊的，惩戒性的，或后果性损害赔偿(包括但不限于采购……替代商品或服务;损失:失去使用、数据或利润;或业务中断)无论如何造成的，根据任何责任理论，无论是在合同，严格责任，或侵权(包括疏忽)(或以其他方式)因使用本软件而产生的，甚至如果被告知这种损害的可能性。

相关文章：