我有一個 100x100 的影像：
<img id="my-face" src="/my-face.jpg" />
我得到它的所有像素，然后計算該影像的平均 RGB：
let img = document.getElementById('my-face')
let avgRgbOfImg = getAverageRGb(img)
我還有一個不同顏色的參考 RGB：
let refRgb = [255, 244, 50] // yellow
我知道現在想為影像添加一個過濾器，以便avgRgbOfImg非常接近我的refRgb：
addFilter(refRgb).to(img)
let newAvgRgb = getAverageRGb(img) // should be pretty close to `refRgb` (yellow)
簡單來說，我有一個影像，我想使用畫布（或 p5.js）向其中添加濾色器，使其avgRgbOfImg非常接近該顏色。
是否有一些畫布/p5 組方法來實作這一點？
uj5u.com熱心網友回復：
使用 RGB 獲得平均顏色的有趣方法。
過去，我回答了一個模糊相似的問題，但根據平均顏色進行基本影像搜索。我沒有使用 RGB 顏色空間，而是使用L a b* 顏色空間，這是一種感知顏色空間。我只是rgb2xyz -> xyz2lab從這里使用了這個和后面公式的實作（如果你去掉一些關鍵字和型別，語法幾乎是 javascript btw）
您可能會得到稍微好一點的結果，但根據您發布的演示，希望不會有太大的不同。它是否證明了復雜性：不確定。
說到復雜性，您可以一直使用深度神經網路。進行快速搜索，具有密集語意對應關系的漸進式顏色傳輸以及相關實作。也許以一種迂回的方式可以訓練 PyTorch 模型并將其匯出到 Tensorflow.js( PyTorch -> ONNX -> TensorFlow -> TensorFlow.js) 并直接使用或與類似于 StyleTransfer 模型的 ml5.js集成。也許它會產生有趣的結果，但這肯定是一種復雜的方法。
如果您已經知道影像的平均 RGB 顏色并且您正在尋找近似/相似的外觀，那么通過簡單地通過tint(). 您甚至可以使用 4th(alpha) 引數控制色調量：
// apply 50% of refRgb
tint(refRgb[0], refRgb[1], refRgb[2], 128);
image(theImageYouWanTinted, 0, 0);
肯定輸出將是源影像和 refRgb 的混合，但它非常容易測驗它是否在視覺上達到了你所追求的目標。
然后，您可以擴展并嘗試其他事情，例如：
- 使用要著色的影像的灰度版本而不是 rgb 版本
- 基于影像內容，單個顏色通道可能會具有更多主導/吸引人的特征（例如，使用紅色、綠色或藍色通道作為灰度而不是真正的灰度）
- 進一步過濾源影像以嘗試提取相關資訊（例如使用中值濾波器稍微平滑影像，嘗試低通濾波器等）
很難衡量事情需要多么精確和復雜：我只想先做tint()。（如果您需要將著色結果“凍結”為像素，請記住，您總是可以獲得所使用內容的“快照”，get()并且可以使用 p5.Graphics 層實作更復雜的事情（請參閱createGraphics()））；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360524.html
標籤：javascript 图像处理 帆布 html5-canvas p5.js