Pixel與Image

一張電腦圖片、一幅螢幕畫面、一臺電子跑馬燈，都是由許多小光點組成，一個小光點就是一個「像素」、「畫素」。大量的小光點排列整齊，宛如棋盤方格，構成一張「圖片」。

小光點夠小夠密集，或者相對來說，小光點很遠很渺小，那麼觀看圖片時，相鄰的小光點將糊在一起，彷彿是柔順平滑的圖片。

電視機與相機經常強調畫素與解析度。畫素很高，意思是小光點很多；解析度很高，意思是小光點很密，使得圖片清晰銳利。

Red, Green, Blue

電腦當中，以整數0到255，代表小光點的亮度。0是最暗，255是最亮。256種數值已經足夠細膩，超越人類視覺對於亮度的辨別能力！

一個像素擁有三個數值，代表紅光、綠光、藍光的亮度；簡稱RGB，紅綠藍的首字母。

三色光疊合，得到各種顏色。RGB都是255，疊合之後就是白光、呈現白色。RGB都是0，就是無光、呈現黑色。RGB都一樣，則呈現灰色。RGB不一樣，則呈現各式各樣的彩色。

第一張圖片是範例圖片；第二張圖片是保留R值（G值與B值設定為0）；第三張圖片是保留G值；第四張圖片是保留B值。右邊三張圖片的對應像素相加之後，就會形成左圖。

舉例來說
第二張圖片裡面，某一個像素的顏色 (255,   0,   0)
第三張圖片裡面，對應的像素的顏色 (  0, 123,   0)
第四張圖片裡面，對應的像素的顏色 (  0,   0, 247)
這三張圖片相加起來，得到第一張圖片裡面，對應的像素的顏色
(255, 0, 0) + (0, 123, 0) + (0, 0, 247) = (255, 123, 247)

熟悉數學的讀者，可以把「RGB值相加」想做是「向量相加」。
但是「RGB值相加」與「向量相加」，兩者背後的原理完全不相干，切莫搞混。

Alpha

有些圖片額外增加一個數值，代表透明程度；簡稱A，alpha的首字母。

0是完全透明、呈現背景底色；255是完全不透明、呈現圖片原色；其餘數值則按比例混合圖片顏色與背景底色。

左圖所有像素的A值都是255，完全不透明，看不到網頁背景的顏色；中圖所有像素的A值是127，透明的程度是50%，看得到一點網頁背景的顏色；右圖中央A值高、外圍A值低。

舉例來說
圖片裡面有一個像素的顏色 (255, 123,  10)，透明程度 34
背景裡面對應的像素的顏色 (  0,   0, 255)

按比例混合（加權平均）（一次內插），得到顯示的顏色
  (255, 123, 10) × 34/256   +   (0, 0, 255) × 222/256
= (255×34/256, 123×34/256, 10×34/256 + 255×222/256)

由於RGB值必須是整數，所以計算結果必須再取floor/ceil/round。

Image的資料結構

圖片的資料結構，一般是二維陣列，一個元素儲存三個數字RGB，或者儲存四個數字RGBA。

注意到：存取矩陣元素、存取圖片像素，行列次序剛好顛倒。套用圖片函式庫時，要尤其小心。

const int X = 1024, Y = 768; struct Color {unsigned char r, g, b;}; Color image[Y][X]; void drawPixel(int x, int y, Color color) { image[y][x] = color; } bool onImage(int x, int y) { return x >= 0 && x < X && y >= 0 && y < Y; } void initImage() { memset(image, 0xff, sizeof(image)); // 白色 }

UVa 706 10267

使用C/C++處理圖片

C與C++本身沒有處理圖片的函式庫。

你可以土法煉鋼，選擇一種圖片檔案格式，例如PNG、JPEG、JPEG XL，研讀其規格書，設計程式讀取圖片擷取像素。

你也可以拍手煉成，直接使用現成的函式庫，例如LodePNG，研讀其使用說明書，呼叫函式讀取圖片擷取像素。

這是我設計的練習題目。

使用C/C++與作業系統處理圖片

分為兩件事情：建立圖片繪製像素、建立視窗繪製圖片。

你可以土法煉鋼，選擇一種作業系統，安裝其開發工具，使用其應用程式介面，例如Windows API、Linux視窗介面的工具、Cocoa、Android API，呼叫函式依序完成兩件事情。

例如以GDI+函式庫建立圖片繪製像素，以WNDCLASS物件建立視窗繪製圖片。

你也可以拍手煉成，直接使用功能齊全的函式庫。圖片影片處理函式庫OpenCV、圖片處理函式庫CImg、圖形使用者介面函式庫GTK，都是不錯的選擇。

使用C#/Java/Qt處理圖片

這些語言處理圖片的方式都大同小異。

首先建立一個圖片物件，例如C#的Image、Java的Image與ImageIO、Qt的QImage，儲存一張圖片。

然後建立一個視窗物件，覆寫其重繪函式：使用函式參數的繪圖物件，例如C#的Graphics、Java的Graphics、Qt的QPaint，把圖片畫在視窗當中。

使用Python處理圖片

Python本身沒有處理圖片的函式庫，必須另行安裝。

知名函式庫是pillow，容易上手。

from PIL import Image img = Image.open("image.png") width, height = img.size for y in range(height): for x in range(width): rgba = img.getpixel((x,y)) rgba = (255 - rgba[0], # R 255 - rgba[1], # G 255 - rgba[2], # B rgba[3] ); # A img.putpixel((x,y), rgba) img.show() img.save("new.png")

使用HTML與JavaScript處理圖片：圖片檢視器

以HTML建立<img>，就能呈現圖片。

<img src="image.png">

以JavsScript動態建立<img>，也能呈現圖片。

<script> var img = document.createElement('img'); img.src = 'image.png'; document.body.appendChild(img); </script> <script> var image = new Image(); // Image建構子，功效相同。 image.src = 'image.png'; document.body.appendChild(image); </script>

先以HTML建立<img>。再以JavaScript擷取<img>，指定圖片檔案名稱。這種混搭風格，也能呈現圖片。

重視網頁排版的情況下，適合使用混搭風格。

<img id="img"> <script> var img = document.getElementById('img'); img.src = 'image.png'; </script>

使用HTML與JavaScript處理圖片：圖片工具組

修改圖片像素，重新畫在網頁，需要一連串步驟。

我們無法直接從<img>得到像素，必須額外使用<canvas>。

先以HTML建立<img>和<canvas>。再以JavsScript擷取<img>和<canvas>，設定<canvas>尺寸。

<img src="image.png" id="img" style="display:none;"> <canvas id="canvas"></canvas> <script> var img = document.getElementById('img'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var w = canvas.width = img.naturalWidth; var h = canvas.height = img.naturalHeight;

先利用drawImage()將<img>的圖片畫在<canvas>上面。再利用getImageData()得到像素。其成員.data是一條一維陣列，依序存放每個像素的RGBA值。

修改每個像素的數值。最後利用putImageData()將像素重新畫在<canvas>上面，便大功告成了。

ctx.drawImage(img, 0, 0); var imgdt = ctx.getImageData(0, 0, w, h); var a = imgdt.data; for (var k=0; k<a.length; k+=4) { a[k ] = 255 - a[k ]; // R a[k+1] = 255 - a[k+1]; // G a[k+2] = 255 - a[k+2]; // B a[k+3] = 255; // A } ctx.putImageData(imgdt, 0, 0); </script>

學會擷取像素之後，就能做一些簡單的實驗了，例如顛倒色彩（255減掉原本的數值）、彩色變灰階（RGB相加除以三）、失焦模糊（取鄰近像素求平均數）。

點擊右上角小圖示，可以查看關鍵程式碼。

使用HTML與JavaScript處理圖片：補充說明

取得圖片內容，正式做法是監聽load事件。圖片載入完畢，才能取得圖片內容。

img.addEventListener('load', function(){ var w = canvas.width = img.naturalWidth; var h = canvas.height = img.naturalHeight; ctx.drawImage(img, 0, 0); var imgdt = ctx.getImageData(0, 0, w, h); ...... }); // 如果load事件總共只有一個函式需要被呼叫，那麼可以縮短程式碼。 img.onload = function(){ var w = canvas.width = img.naturalWidth; var h = canvas.height = img.naturalHeight; ctx.drawImage(img, 0, 0); var imgdt = ctx.getImageData(0, 0, w, h); ...... };

想要建立像素，可以利用createImageData()。想要拷貝像素，可以直接拷貝陣列。

var imgdt2 = ctx.createImageData(w, h); var a2 = imgdt2.data; var imgdt2 = ctx.createImageData(w, h); var a2 = new Uint8ClampedArray(imgdt.data); imgdt2.data.set(a2);

瀏覽器為了安全起見，預設禁止讀取本機檔案。如果你想用本機檔案做實驗，你必須修改瀏覽器設定。做好實驗記得改回來。

Firefox
網址列輸入 about:config
security.fileuri.strict_origin_policy 的值改為 false

Chrome
命令列輸入 chrome.exe --allow-file-access-from-file

或者正常做法是建立本機網頁伺服器。

使用現成軟體處理圖片

Image的演算法，早已經製作成套裝軟體。完全不需要學習程式語言與數學，只需要仔細閱讀軟體使用說明書。發揮創意，就能做出各種圖片特效。

商業軟體，例如Adobe Photoshop。開源軟體，例如GIMP。

簡介

調整像素的數值。

圖片的數學運算：Function

新舊圖片，新舊像素值的對應關係，是函數。RGB分開處理，是三個函數。

identity transformation：f(x) = x。45°斜線。亮度不變。

negative transformation (color invert)：f(x) = (256-1) - x。翻轉45°斜線。亮暗顛倒，彷彿傳統相機的負片。用於視覺特效。

piecewise linear transformation (contrast stretching)：f(x) = (yᵢ₊₁ - yᵢ) / (xᵢ₊₁ - xᵢ) when xᵢ ≤ x ≤ xᵢ₊₁。名稱省略了monotone。調整亮度對比，看得比較清楚。用於分析鑑識。

log transformation (dynamic range compression)：f(x) = k log(1+x)。實際亮度變成人類觀感強度。用於錄影設備。

power-law transformation (gamma correction)： f(x) = k xᵞ。人類觀感強度變成實際亮度。用於顯示設備。

圖片的數學運算：Histogram

RGB分開處理，得到RGB三個直方圖。一張圖片，像素值（亮度）僅256種，分別統計0到255的出現次數，得到直方圖。甚至再除以總次數，得到機率密度函數PDF。

先前透過函數，訂立新舊亮度的對應關係：每種舊亮度，對應每種新亮度。現在透過直方圖，訂立新舊亮度的對應關係：舊直方圖，對應新直方圖。

histogram equalization：調整直方圖間距。兩兩相鄰亮度，舊亮度的出現次數相差越多，新亮度相差越多，成正比。預先計算出現次數的累積和（甚至再除以總次數，得到累積分布函數CDF），方便計算新亮度。實際應用：在亮者恆亮、暗者恆暗的前提下，讓亮暗層次更分明。

histogram matching：以CDF來建立新舊亮度的對應關係。實際應用：一張圖片，求出CDF；自訂另一個CDF，以自由調整新亮度。

histogram comparison：求出兩個直方圖的差距，以判斷圖片相似程度。方法很多。

Color Thresholding

門檻化。區分像素數值大小，依照大小分別處理。

進階應用有黑白化（二值化）、單色化。

binary thresholding：自訂臨界值。大於臨界值、小於臨界值，實施不同處理。

Otsu's thresholding：窮舉臨界值，找到最佳臨界值。大於臨界值為前景，小於臨界值為背景，求前景PDF、背景PDF，求前景變異數、背景變異數相加最小者。

Color Reduction（Color Quantization）

刪減。減少顏色種類，讓圖片依然清楚。每個顏色重新設定顏色；把不同的顏色，重新設定成相同的顏色。

令壓縮圖片的效果更好、傳遞圖片的速度更快。另外，當顏色種類很少，可塑造特殊風格。

進階應用有色調分離、色帶。

左圖是原圖，中圖是只有256種顏色的圖，右圖是選中的256種顏色。

k-means clustering：要幾種顏色就分幾群。形成Voronoi Diagram，各群中心是新顏色。

median cut：所有像素置於RGB三維空間。反覆分割空間，不斷取寬度（或體積）最大的區塊，從最寬的那一個維度、從中位數分割。如果原圖片要降低為256種顏色，就切出256個區塊。區塊內所有像素，新顏色一律是平均數。

Color Transfer（Color Mapping）（Color Matching）

轉移。重新著色，參考另一張圖片的色調。

normalization：RGB轉Lab，標準化（減去平均數、除以變異數），反標準化（乘以參考圖片變異數、加上參考圖片平均數），Lab轉RGB。

histogram matching：原始圖片與參考圖片的直方圖，建立顏色的對應關係。

optimal transport：我沒有研究。教材。

簡介

調整像素的數值，依據鄰近像素的數值。

圖片的數學運算：Filter

一張圖片，可以表示成RGB三個陣列，三個陣列分開處理。教科書則是表示成RGB三個函數。

圖片具有地域性，鄰近像素關係匪淺。鄰近像素的平均數、相差值（梯度），各有功效。這些計算，可以統一成加權平均數，又可以統一成點積：對應項相乘，加總。

一種位移量、一次點積，得到一個新像素。窮舉各種位移量、一一點積，即卷積，得到新圖片。時間複雜度O(XYMN)。

【註：卷積規定其中一條數列必須頭尾顛倒；方便起見，此處不顛倒圖片和濾波器。】

超過圖片邊界時，有許多種應對方式，例如不計算、補零、複製邊界數值、一次內插。旁枝末節，不重要。

先算橫條，再垂直整合，一如區域總和、區域最小值的計算手法，時間複雜度降為O(XY(M+N))，但是需要大量額外空間。

空域循環卷積，就是頻域乘法。時間複雜度降為O(XYlogXY + MNlogMN)。然而濾波器通常很小，不必大費周章、弄巧成拙。

設計濾波器、套用濾波器，便能製造各種圖片特效。亦得在特定區域之內套用濾波器，而不是整張圖片都套用濾波器。

濾波器是線性的。倍率性：一個濾波器（的每個值）乘上倍率，等於新圖片（的每個像素）乘上倍率。加法性：兩個濾波器相加減，等於兩張新圖片相加減。想要揉合多張新圖片，可以預先揉合濾波器，降低計算量。

新圖片像素數值必須介於0到255，須normalization。

Image Smoothing（Image Blurring）

平滑化、霧化。消滅邊緣。失焦模糊。

進階應用有動態模糊、去噪、抗鋸齒、打馬賽克。

人眼感知到的平滑，就是亮度暨彩度相差很少。相鄰像素取平均數，讓彼此數值更接近、更平滑。

mean filter：原數值替換為附近數值們的平均數。濾波器的數值均為1/NM。

Gaussian filter：濾波器是二維常態分布。有高速算法。

diffusion filter：各數值往四周均勻擴散，自訂擴散率。另一種解讀方式：Laplacian乘上自訂擴散率之後，添加到原數值。

Image Edge Detection

邊緣偵測。得到形狀邊緣。

進階應用有邊緣強化（銳化）、鏤空。

人眼感知到的邊緣，就是亮度暨彩度相差很多。相鄰像素取差值，差值較大的地方就是邊緣。

gradient filter：梯度。X軸Y軸分別一次偏微分，再求長度。中央減左、中央減下，平方和，開根號。

Sobel filter：gradient filter補強中央數值，凸顯邊緣。

Laplacian filter：梯度的散度。X軸Y軸分別二次偏微分，再相加。上下左右總和，減去4倍中央。

Laplacian of Gaussian filter (LoG filter)：先做Gaussian filter，再做Laplacian filter。先去噪，再求邊緣，效果更佳。

difference of Gaussian filter (DoG filter)：LoG filter的高速近似算法。兩個Gaussian filter，平均數相同、變異數為0.3和1.0，相減之後恰好近似Laplacian filter。

圖片的數學運算：Spatial Filter與Range Filter

線性濾波器：鄰居們的加權總和。

空域濾波器：權重取決於「自己與鄰居的座標距離」。

值域濾波器：權重取決於「自己與鄰居的數值距離」。

用於圖片時，座標是指索引值，數值是指像素值。

空域濾波器，可以表示成卷積，可以轉至頻域計算。值域濾波器，很不幸不行，必須特地構思高速算法。

Image Edge-preserving Smoothing

保留邊緣的平滑化。平滑化，同時盡量保留邊緣。

進階應用有特殊風格圖片、去噪。

median filter：鄰居中位數。以消除極端數值。高速算法。

fuzzy median filter：鄰居加權平均數，權重是「鄰居數值代入常態分布」，常態分布中心是鄰居中位數。median spatial filter與Gaussian range filter混種。

bilateral filter：Gaussian filter改良版。當鄰居數值差距太大，就降低其權重，盡量不列入計算，以保留形狀邊緣。Gaussian spatial filter與Gaussian range filter相乘。高速算法。

rolling guidance filter：先做一次Gaussian filter；再以原圖當作參考圖片，做很多次joint bilateral filter。

anisotropic diffusion filter：diffusion filter改良版。當梯度太大，就盡量不擴散，以保留形狀邊緣。diffusion spatial filter與Gaussian range filter混種。

guided filter：各像素實施相同線性變換，導致各像素的梯度乘以相同倍率，導致邊緣相似。原圖片各像素增減數值（過濾）、參考圖片各像素實施相同線性變換，令兩者平方誤差盡量小，推得線性變換公式。高速算法。

圖片的數學運算：Mathematical Morphology

圖片視作三個函數，以數學形態學調整函數形狀，例如dilation令亮處擴散黏結、erosion令暗處擴散黏結。亦可先求梯度再處理。

Image Template Matching

匹配。給定圖片片段，找到正確位置。概念等同字串搜尋。

完全相等：窮舉所有位移量；針對每一種位移量，對應位置判斷相等後求AND。缺點是像素數值不准有一丁點誤差。

平方誤差最小：對應位置相減平方後求和。

相關係數最大：對應位置相乘後求和（即卷積）。憑感覺瞎搞，但是算得快。圖片預先銳化、圖片預先保留高頻，結果較佳。

Chamfer distance最小：特色是比對邊緣，而且邊緣形狀不必完全相同。圖片與片段，預先求得邊緣、二值化（邊緣為1，非邊緣為0）。圖片求distance map。套用相關係數最大的演算法。

圖片的數學運算：Pyramid

先模糊化、再縮小尺寸。不斷重複，得到許多張圖片，造型宛如金字塔。近處清晰可見全圖，遠處模糊只剩一點。

人眼有著觀（失焦、視野廣）看（對焦、視野窄）的差別。由觀到看、由看到觀的過程當中，人腦似乎能夠快速擷取圖片特點。

進階應用有平滑、匹配、合成。

mean pyramid：先做2×2 mean filter，再做1/2 subsampling。高速算法是四個像素取平均數精簡成一個像素（田變口）。

Gaussian pyramid：改採Gaussian filter。

Laplacian pyramid：改採Laplacian filter。

簡介

調整像素的位置。

圖片的數學運算：Geometric Transformation

訂立每個像素的新座標，或者只訂立每個像素的移動方向，然後移動像素。這麼做可以營造一些圖片特效。

一一設定每個像素，實在太累人。我們可以直接運用優美的數學工具，運用幾何變換，一口氣移動所有像素。計算幾何與線性代數談過幾何變換，例如位移、縮放、旋轉、鏡射。

正向處理（直接法）：窮舉原圖片每個像素的座標，一一變換，得到新座標。新座標四捨五入，讓像素座標是整數。然而，有些地方密集重疊、有些地方稀疏留白，無法構成圖片。這種方式行不通。

逆向處理（試誤法）：窮舉新圖片每個像素的座標，一一逆向變換，得到原座標。實施二維內插，例如近鄰內插（恰為四捨五入）、雙一次內插、sinc內插，求得理想的像素數值。

Image Scaling（Image Resizing）

縮放。調整圖片尺寸。

進階應用有Depixelation。

Image Rotation

旋轉。除了內插，亦得用shear達成圖片旋轉，避免誤差。

圖片的數學運算：Weighted Average Coordinates

移動像素亦可運用加權平均座標。釘選幾個對應點，就能在原圖片與新圖片上面訂立座標系統，立即完成每個像素的座標對應關係。

三角形座標：

四邊形座標：

Image Warping

扭曲。扭曲外形。

進階應用有驗證。

function-based warping：制定一個函數，二維到二維，輸入是像素原始位置，輸出是像素移動目的地。

feature-based warping：標記數條對應線段，以線段長度、點線距離，作為內插比重。特色是容易操作。

mesh warping：手動或者自動建立網格，網格頂點是控制點。原圖片網格呈整齊等分，新圖片網格供用戶調整。隱藏原圖片暨網格，顯示新圖片暨網格。對應網格實施座標內插。

Image Deformation

形變。扭曲外形，保持架構。

n-point deformation：建立n個點當作控制點。

skeleton deformation：建立樹狀骨架，端點是控制點。

cage deformation：建立多邊形外框，頂點是控制點。

Image Morphing

變形。從一個外形變化為另一個外形。

進階應用有美化、變臉、補幀。

warping：像素位置逐步變化。改變形狀。

cross dissolving：像素數值逐步變化。淡入淡出。

morphing：同時warping與cross dissolving。兩張圖內插，像素位置、像素數值同時內插。事先標記數個對應點，符合五官特徵、四肢關節。

Painting

簡介

Color Dithering

顫化。減少顏色種類，讓圖片觀感與原先相仿。每個像素依序重新設定顏色；每個像素的先後顏色誤差，分攤給鄰近的像素。

dithering是印刷和液晶顯示的重要技術。報紙上的圖片就用了dithering，用少量的單調顏色，調合出原本顏色；在原本像素的周圍點上單調顏色，宏觀望去宛如原本顏色。

左圖是原圖，中圖是先轉灰階再處理，右圖是RGB三個值分開處理。新顏色只有兩種，要嘛是255、要嘛是0。

Floyd–Steinberg dithering：先後誤差的7/16傳給右、3/16給左下、5/16給下、1/16給右下。所有像素依行列順序處理，具有遞推效果，一傳十十傳百。

Color Halftoning（Color Stippling）

半色調化。僅使用基本原色，讓圖片觀感與原先相仿。以墨水點的尺寸、間距、數量，取代像素值。

AM halftoning：墨水點尺寸不同、間距相同。像素值越高越亮，墨水點越小越淡。

FM halftoning：墨水點尺寸相同、間距不同。像素值越高越亮，墨水點越散越淡。

Image Abstraction

抽象化。保留圖片大致的輪廓、大致的色調。

Image Stylization

風格化。重新繪製圖片，呈現特殊風格。已有彙整書籍、彙整文章。

stroke-based rendering：畫線。每個像素大致朝著相同方向移動一段距離，沿途不斷貼上。調整筆畫粗細、下筆間距，可以營造印象派畫風。亦得朝梯度的垂直方向移動，遇到邊緣就停住，讓邊緣明顯。畫筆與像素，顏色差異太大就停住。算法在此。

image-based sketching：濾鏡。以image edge detection產生線條，以image thresholding產生濃淡，製造素描風格。

XDoG filter：濾鏡。DoG filter追加權重、套用tanh函數，以調整邊緣範圍。

domain transform：濾鏡。bilateral filter追加特殊函數。

local Laplacian filter：濾鏡。以color function調整圖片，以Laplacian pyramid合成圖片，製造圖片特效。高速算法。

Image Style Transfer（Image Analogy）

風格轉移。擷取圖片風格，套用至其他圖片。

Hertzmann's algorithm：擷取兩圖之間的風格差異，套用至其他圖片。

neural network：根據大量圖片的觀後感，生成像素。

Image Relighting

重新打光。調整光照位置與強度。

Portrait Shadow Removal

頭像陰影去除。移除臉部影子，還原正常顏色。

簡介

Image Compositing

合成。兩張圖片相疊覆蓋，成為一張圖片。

copy-and-paste：直接覆蓋。建議先去背。弄得好是剪貼藝術、拼貼藝術。

Image Segmentation

分割。區隔景物，找到邊界。

edge detection：先求邊緣，再訂立臨界值以得到邊界。

quadtree (watershed transform)：局部極小值分別注水。相連水域，推定為相同景物。高速算法是四元樹，求每塊區域的平均數與變異數。分割過程中，當變異數太高則分割區域。分割結束後，當平均數相近則合併區域。程式碼。

histogram：一、手動劃記前景與背景。前景劃記處求PDF，背景劃記處求PDF。二、圖片每個像素，區分前景與背景，根據PDF機率大小。然而前景與背景不一定連通。三、圖片每個像素，重新區分前景與背景，根據最短路徑長度。分別找到每個像素到前景劃記處、背景劃記處的最短路徑，點是像素，邊是八方向，邊的權重分別是前景PDF機率差、背景PDF機率差。前景與背景多半會連通。四、於邊界兩旁，分別擷取前景與背景的像素，作為新的劃記。反覆執行演算法，直到邊界收斂。

shortest path (geodesic distance transform)：手動塗抹景物，自動尋找景物邊界。多目標最佳化。一、邊界到前景的最短距離。二、邊界與前景的像素差異。

geometric flow (active contour model)：手繪曲線圈選景物，自動調整曲線形狀。曲線簡化成折線，讓頂點又多又密。多目標最佳化。一、令折線上面的圖片梯度盡量大（簡化成折線頂點）。二、令拉力、張力盡量小（折線一次微分、二次微分盡量小）。三、令線段盡量等長（變異數盡量小）。程式碼。

optimization (variational model)：承上。平滑化、找邊界，兩者一併處理。平滑與邊界相互對立，平滑之處就不是邊界。多目標最佳化，再令折線以內的新舊像素差距盡量小、梯度盡量小。

minimum cut (GrabCut)：像素之間的權重：梯度長度倒數。源點（匯點）到像素的權重：前景（背景）像素理想值與實際值的差距的倒數。倒數通常改成高斯分布或者左右翻轉的sigmoid，以避免倒數趨近無限大。

neural network (dilated convolution)：捲積規則(f∗g)(n) = {f(x)g(y) : x+y=n}改成了x+sy=n，製造間隔，避免過擬合。

Image Blending

合成。兩張圖片相疊揉合，成為一張圖片。

進階應用有臉部剪接。

compositing和blending有點差別。compositing是聚合，拼湊在一起。blending是融合，摻雜在一起。運用blending得以製做自然美觀的compositing。

alpha blending (cross dissolving)：RGB加權平均。鬼影。

pyramid blending：兩圖分別求Laplacian pyramid，由小到大逐層合成。

Poisson blending：新圖梯度，儘量等於底圖梯度（或者儘量等於兩圖梯度較大者）。新圖梯度與底圖梯度的平方誤差最小，就是梯度的散度相等，此即微分方程經典公式Poisson equation。化作一次方程組求解，亦有頻域的高速算法（限矩形區域）。程式碼。

Image Matting

去背。保留主角，去除背景。區隔景物，找到邊界。

進階應用有替換背景。

segmentation與matting有點差別。segmentation著重大體，matting著重細部。

有人認為blending與matting互為反運算。blending是疊合兩張圖片，matting是剝離兩張圖片。

blue screen matting：主角背後放個藍幕或藍牆壁進行拍攝，圖片中的藍色就是背景。俗擱有力，又快又準。攝影棚必備道具。

natural image matting：公式解。least squares method。

Bayes matting：公式解。maximum likelihood estimation。

Poisson matting：公式解。discrete Poisson equation。

Image Anti-aliasing

抗鋸齒。找到邊緣，調整像素數值，儘量不稜稜角角。

morphological anti-aliasing (MLAA)：邊緣區分成LZU三種形狀，分別處理。

enhanced subpixel morphological antialiasing (SMAA)：MLAA各種微調。

Image Super Resolution

超解析度。調整像素數值，提高圖片解析度。

neural network：Super Resolution GAN。

neural network：Deep Learning Super Sampling (DLSS)。

Image Retargeting

重新定位。縮小圖片長寬，裁剪多餘像素，但是保留景物造型。

seam carving：屢次刪除不穿過邊緣的路徑，路徑以縱向或橫向跨越圖片，使得圖片長或寬屢次減一。使用動態規劃或大量隨機散步，找到一條梯度絕對值總和最小的路徑。梯度可換成Sobel、Canny。

Image Inpainting（Image Completion）

修補。填補缺漏像素。

進階應用有消除邊緣。

image template matching：依照行列順序，逐一填補像素。針對一個像素，擷取鄰居成為圖片片段（通常是9x9），從參考圖片找到最符合的圖片片段，用以填補像素。

image smoothing：依照行列順序，逐一填補像素。取得已知的鄰近像素，求亮度平均數（平滑化），甚至採用其他的平滑化濾波器。缺點是平滑化所帶來的模糊化、邊緣偏移、誤差累進。

fluid dynamics：周界往內推進，逐一填補像素。周界像素視作粒子，沿著梯度的垂直方向移動（沿著邊緣移動），速度是二階微分。可表示成偏微分方程PDE。詳細內容是個謎！

fast marching：周界往內推進，逐一填補像素。填補順序是自創的最短距離，填補數值是自創的加權平均數。缺點是邊緣破損。

填補順序。周界為起點，求周界到內部像素們的最短距離。label setting algorithm，像素視作節點。最短路徑分兩類：由正上/正下/正左/正右走來，距離加一；由上左/上右/下右/下左走來，距離如下圖。

填補數值。針對一個已知鄰點，其亮度加梯度（取出朝向填補點的分量，求其長度），是填補點理論上的亮度。針對所有已知鄰點，個別求出理論上的亮度，再求加權平均數，權重是這三項相乘：

一、修補後的周界的法線（即最短距離的梯度），取出朝向像素的分量，求其長度。二、鄰點與填補點，二維直線距離的倒數。三、鄰點與填補點，前述最短距離的差的倒數。

neural network：先求邊緣、再填顏色。

Image Recomposition（Image Reshuffling）

重新合成。移動景物位置，無縫接軌。

Semantic Image Segmentation

語義分割。將圖片像素連結成區域。像素屬於同類物體。

neural network：用手動分類的圖片進行訓練。

semantic segmentation：語義分割。區分不同類別的物體。
instance segmentation：實體分割。區分每一個物體。
panoptic segmentation：全景分割。上面兩個都做。

Semantic Image Synthesis

語義生成。根據給定規則，產生最相像的圖片。

neural network：根據大量圖片的觀後感，生成像素。

Semantic Image Editing

語義編輯。根據指定的區域與標籤，生成圖片。

neural network：根據大量圖片的觀後感，生成像素。

Semantic Image Completion

語義補全。填補大片缺漏像素，重塑景物。

data-driven：從資料庫找到最相像的圖片，剪接上去。

neural network：根據大量圖片的觀後感，融合或填補像素。

Image Sketch Colorization

線稿上色。給定描邊圖片，得到彩色圖片。

pix2pix：根據大量圖片的觀後感，生成像素。

Style2Paints：根據大量圖片的觀後感，生成像素。

Portrait Sketching

頭像素描。給定頭像圖片，得到素描圖片。

Texture

Texture Generation

紋理生成。製造紋理。

noise：以亂數、三角函數生成紋理，以一次內插生成綿延感。

Perlin noise：改以遞迴函數生成紋理。

Gabor noise：改以小波轉換生成紋理。論文一、論文二。

Texture Synthesis

紋理生成。延展紋理，由窄變廣。

Voronoi diagram：素材隨機取出片段，隨機散佈，相鄰素材片段的中央地帶求加權平均。程式範例。

image quilting：素材隨機取出方格，整齊拼接，部分交疊，交疊處誤差盡量小。誤差可定義為：所有對應像素誤差總和、最小割（平面圖最小割即最短路徑）。

discrete element textures：

stroke pattern：

Texture Transfer

紋理轉印。拼接紋理，構成圖形，宛如拓印。

image quilting：紋理與新圖片交疊處的誤差（最小割），紋理與原圖片的匹配誤差，兩者加權平均數最小。

Image Texture Description

紋理描述。將紋理獨特之處寫成數值，以供辨識比對。

local binary pattern：八個相鄰像素值，分別減去中央像素值，取其正負號，變成8-bit二進位數值。旋轉視為相同，剩下36種數值。圖片所有像素都實施此計算，統計每種數值的數量。

Texture Segmentation

Texture Classification