Javascript Canvas：如何获取透明png文件中的特定点？

Question

好的，我对获取图像数据功能感到困惑 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

我有一个png格式的路径图像，上面有透明背景。我需要得到的是高度/ 2处路径的左右边缘的坐标x，y。 （红色箭头的点）

getImageData是否正确使用？任何人都可以就如何获得它们提出一些建议吗？

提前致谢。

Answer 1

是的，请使用getImageData(x, y, width, height);
 如果你只有两种颜色（这里是透明和白色）：

＆＃13;

＆＃13;

var img = new Image();
img.onload = getPoints;
img.crossOrigin = 'anonymous';
img.src = "https://dl.dropboxusercontent.com/s/lvgvekzkyqkypos/path.png";

function getPoints(){
  // set our canvas
  var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
  canvas.width = this.width;
  canvas.height = this.height;
  // draw the image
  ctx.drawImage(this,0,0);
  // get the middle y line
  var imageData = ctx.getImageData(0,Math.floor(this.height/2), this.width, 1);
  var data = imageData.data;
  // set an empty object that will store our points
  var pts = {x1: null, y1: Math.floor(this.height/2), x2: null, y2:Math.floor(this.height/2)};
  // define the first opacity value
  var color = 0;
  // iterate through the dataArray
  for(var i=0; i<data.length; i+=4){
    // since we'relooking only for non-transparent pixels, we can check only for the 4th value of each pixel
    if(data[i+3]!==color){
      // set our value to this new one
      color = data[i+3];
      if(!pts.x1)
        pts.x1 = i/4;
      else
        pts.x2 = i/4;
      }
    }
  
  snippet.log('start points : '+pts.x1+'|'+pts.y1);
  snippet.log('end points : '+pts.x2+'|'+pts.y2);
  ctx.fillStyle = 'red';
  ctx.fillRect(pts.x1-5, pts.y1, 10, 10);
  ctx.fillRect(pts.x2-5, pts.y2, 10, 10);
  document.body.appendChild(canvas);
  }

＆＃13;

body{background-color: blue}

＆＃13;

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

＆＃13;

＆＃13;

＆＃13;