如何输入一张线性渐变图片，输出渐变算式

Question

更新要求，需要综合考虑输出点的数量和原图的相似度哟～

如何输入一张像这样的图片（或者输入就是N个颜色组成的数组，不包含alpha透明），输出渐变算式？这个网站已经有这个功能了。

比如我们在PHOTOSHOP里常见的：

DEMO、伪代码、算法关键字都欢迎～

---

示例输入（png24图像）

示例输入（数组）

["#64befc","#64befc","#65befc","#65befc","#66befc",...]

示例输出（JSON）

[{"#64BEFC": 0},{"#9ED8FB": 0.3},{"#EBFBF6": 1}]

示例输出（CSS）

background: linear-gradient(to bottom, rgba(100,190,252,1) 0%,rgba(158,216,251,1) 30%,rgba(235,251,246,1) 100%);

Answer 1

難點就在於取樣點上。

目前得到的大概是這樣的，和樓上的差不多啦：

https://bumfo.github.io/grad.html

---

說了方法忘了寫思路了。

是這樣：圖像可以看作標量場，而漸變可以看作梯度。而我們要的是漸變的轉折點也就是沿梯度最大的方向的二階梯度的最大值最小值，也就是對漸變進行邊緣檢測。

---

想到一種笨辦法

data.reduce(function(x0, x1) {
    grad.push(x1 - x0);
    return x1;
});

grad.reduce(function(x0, x1) {
    grad2.push(x1 - x0);
    return x1;
});

得到類似這樣的：[0, -0.0001, 0.001, 0.002, 1, 0.01, 0.00009, 00]

設個閾值，輸出 [0,0,0,0,1,0,0,0]

輸出邊界和非 0 的位置：0, 4, 7

按照位置去原圖裏找節點的顏色值，

最終輸出類似這樣的 [{"#64BEFC": 0},{"#9ED8FB": 0.5714},{"#EBFBF6": 1}]

Answer 2

你是不是想要这种网站的效果：

http://gradientfinder.com/
github: gradientfinder

Answer 3

思路大概是这样的：线性渐变其实就是分段函数；

取出某一通道，例如R通道，从左往右找到分段函数的转折点就行了；

转折点的判断可以用向量叉乘，或者斜率变化来检查；

难点在于斜渐变的定向。