code: function getPointsOnPicture(selector) {
    var img = document.querySelector(selector);
    var width = img.width;
    var height = img.height;
  
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);
    var imgData = ctx.getImageData(0, 0, width, height);
  
    var points = [];
    var xStep = 8;
    var yStep = 8;
    for (var x = 0; x < width; x += xStep) {
      for (var y = 0; y < height; y += yStep) {
        var i = (y * width + x) * 4;
  
        // not collect the points for alpha is zero
        if (imgData.data[i + 4] <= 0) {
          continue;
        }
  
        points.push({
          x: x - width / 2,
          y: -(y - height / 2),
          z: 0,
          r: imgData.data[i] / 255,
          g: imgData.data[i + 1] / 255,
          b: imgData.data[i + 2] / 255,
          a: imgData.data[i + 3] / 255,
        });
      }
    }
  
    return points;
  }
docs: Translate a picture to a set of points
  
  @param {String} selector The DOM selector of image
  @returns {Array} return the set of points