Question

我正在尝试实现Photoshop的曲线功能来调整网页上的图像。我在Wikipedia（https://en.wikipedia.org/wiki/Spline_interpolation）上寻找样条插值法，但是我不太了解算法。

现在我正在使用CanvasSpliner（https://github.com/jonathanlurie/canvasSpliner）创建曲线的UI功能（此处为示例http://me.jonathanlurie.fr/canvasSpliner/），并且我具有该UI上所有点的坐标（值范围为0-255））。我使用Map对象存储所有如下所示的点：

var pixel_map = new Map();

//cs is the CanvasSpliner object, I just demo with releasePoint event
cs.on("releasePoint", function(csObj){
  //x_coor, y_coor is the coordinate get from mouseMove event
  pixel_map.set(x_coor.toString(), y_coor);
}

因此，如果我将Map对象上所有相应点的输入与点的输出的所有图像像素（值范围0-255）进行匹配，如下所示：

//I match with 3 channels R, G, B
for (let [key, value] of pixel_map) {
  if (data[channels_at_xy.R] === key) {
    temp_image_data.data[channels_at_xy.R] = value;
  }
  else if (data[channels_at_xy.G] === key) {
    temp_image_data.data[channels_at_xy.G] = value;
  }
  else if (data[channels_at_xy.B] === key) {
    temp_image_data.data[channels_at_xy.B] = value;
  }
  else if (data[channels_at_xy.A] === key) {
    temp_image_data.data[channels_at_xy.A] = data[channels_at_xy.A];
  }
  else{
    temp_image_data.data[channels_at_xy.R] = data[channels_at_xy.R];
    temp_image_data.data[channels_at_xy.G] = data[channels_at_xy.G];
    temp_image_data.data[channels_at_xy.B] = data[channels_at_xy.B];
    temp_image_data.data[channels_at_xy.A] = data[channels_at_xy.A];
   }
}

不属于Map对象的其他像素如何进行样条插值，我只是将它们保留为上面代码中的默认值？（例如，如果我的Map对象有3个元素，我可以将3个元素映射到3个对应的像素，默认值为253个像素。）正如我在Photoshop中观察到的那样，使用曲线时，所有像素都会改变，而不仅仅是与输入值匹配的像素。

如何使用样条插值对像素点的值进行插值？

0 个答案: