js 雙線性插值雙三次插值法實現

雙三次插值法

js實現

在網頁中利用canvas進行繪圖時，遇到乙個問題，原始的資料解析度很小，而要放大到整個網頁，所以需要把資料進行插值放大。學習了雙線性插值和三次內插法插值，兩種方式實現效果不同，都用js**實現了一下，下面給大家分享一下

雙線性插值即在x和y兩個方向上，對資料各進行一次線性插值。

原始資料的矩陣，即乙個二維陣列，大小為a*b，目標矩陣大小為m*n，m、n比a、b可以大（放大），也可以小（縮小），當然比例也可以不一樣, 取決於你插值後的資料需要多大。

基本思想為，遍歷目標矩陣的座標，如x*y這個點，找到這個點在原始矩陣中對應的位置，稱為對映點，然後找到這個對映點p在原始矩陣中周圍的四個點，然後根據對映點p到這個四個點的x和y方向上的座標的距離，進行兩次線性插值，得到對映點的值即可。

如上圖所示，p點為目標矩陣中x*y點在原始矩陣中對映的位置，它周圍最近的有q12，q11，q21，q22四個點，現在x方向進行線性插值，得到r1和r2兩個點的值，再在y方向進行一次線性插值，得到p點的值。

注意：用雙線性插值放大資料後，如果放大倍數過大，生成後發現有著明顯的馬賽克現象

實現**參考後面js**

雙三次插值又稱立方卷積插值。三次卷積插值是一種更加複雜的插值方式。該演算法利用待取樣點周圍16個點的灰度值作三次插值，不僅考慮到4 個直接相鄰點的灰度影響，而且考慮到各鄰點間灰度值變化率的影響。具體的原理可參考下面部落格：

參考這裡的部落格

基本原理就是，先找到目標矩陣中點在源資料矩陣中的對映點p，然後找到p點周圍16個點，然後根據p點座標距離16個點的x和y方向的距離，利用bicubic函式算出每個點的權重，最後每個點乘以權重後，加起來即可得到p的值。

bicubic函式：

其中，a取-0.5時，bicubic函式具有如下形狀：

取a=-0.5時，放大的資料挺好，生成的非常平滑，也保留了很多細節。

具體為什麼要用這個函式，我也沒有深入研究，不過利用該方法放大資料後，生成效果很好，沒有馬賽克現象

/**
* 資料處理工具類（也可以自己直接定義方法，不用class）
*/class
datautil
}/**
* 資料插值
* @param w 目標矩陣寬度
* @param h 目標矩陣高度
* @param data 源資料矩陣（二維陣列）
* @param type 插值方式，1：雙線性插值，2：雙三次插值法
*/datautil.
scaledata
=function
(w, h, data, type =2)
else
if(type ===1)
else
line[i]
= math.
round
(v);
}		resdata[j]
= line;
}let t2 =
newdate()
.gettime()
;	console.
log(
"資料插值耗時:"
,(t2 - t1));
return resdata;
}/**
* 雙線性插值
* @param sw 目標矩陣的寬度
* @param sh 目標矩陣的高度
* @param x_ 目標矩陣中的x座標
* @param y_ 目標矩陣中的y座標
* @param data 源資料矩陣（二維陣列）
*/datautil.
interpolation
=function
(sw, sh, x_, y_, data)
/** * 雙三次插值法
* @param sw 目標矩陣的寬度
* @param sh 目標矩陣的高度
* @param x_ 目標矩陣中的x座標
* @param y_ 目標矩陣中的y座標
* @param data 源資料矩陣（二維陣列）
*/datautil.
cubicinterpolation
=function
(sw, sh, x_, y_, data)
}return val;
}/**
* 雙三次插值法中，基於bicubic基函式，計算源座標v，最近的4*4的座標和座標對應的權重
* @param v 目標矩陣中座標對應在源矩陣中座標值
*/datautil.
getcubicweight
=function
(v)else
if(val <2)
ws[i]
= w;
}return
;}

git專案位址

專案中有上述原始碼，和使用案例

js 雙線性插值雙三次插值法實現

雙線性插值法

線性插值和雙線性插值

雙線性插值

js 雙線性插值 雙三次插值法 實現

雙線性插值法

線性插值和雙線性插值

雙線性插值

相關推薦

js 雙線性插值雙三次插值法實現