Implement bilinear interpolation and bicubic interpolation in js

Free learning recommendation: js video tutorial

• Introduction
• Bilinear interpolation
• • Principle
• Bicubic interpolation method
• • Principle
• js implementation

Introduction

When using canvas to draw on a web page, I encountered a problem, original The data resolution is very small, and the image needs to be enlarged to the entire web page, so the data needs to be enlarged by interpolation. I learned bilinear interpolation and cubic interpolation. The two methods have different effects. They are both implemented with js code. Let me share with you

bilinear interpolation

Principle

Bilinear interpolation performs linear interpolation on the data in each of the x and y directions.
The matrix of the original data, that is, a two-dimensional array, the size is a*b, the target matrix size is m*n, m, n can be larger (enlarged) or smaller (reduced) than a, b, of course the ratio It can also be different, depending on how big your interpolated data needs to be.
The basic idea is to traverse the coordinates of the target matrix, such as the x*y point, find the corresponding position of this point in the original matrix, which is called a mapping point, and then find the four surrounding mapping point P in the original matrix. point, and then perform linear interpolation twice based on the distance from the mapping point P to the coordinates in the x and y directions of the four points to obtain the value of the mapping point.

As shown in the figure above, point p is the position where the x*y point in the target matrix is ​​mapped in the original matrix. The nearest four points around it are Q12, Q11, Q21, and Q22. Now x Linear interpolation is performed in the y direction to obtain the values ​​of the two points R1 and R2, and then linear interpolation is performed in the y direction to obtain the value of point P.
Note: After using bilinear interpolation to amplify the data, if the magnification is too large, there will be obvious mosaic phenomenon after generating the image.
For the implementation code, please refer to the following js code

Bicubic interpolation Method

Principle

Bicubic interpolation is also called cubic convolution interpolation. Cubic convolution interpolation is a more complex interpolation method. This algorithm uses the gray value of 16 points around the point to be sampled for cubic interpolation, taking into account not only the gray influence of the four directly adjacent points, but also the influence of the change rate of the gray value between adjacent points. For the specific principle, please refer to the following blog:
Refer to the blog here
The basic principle is to first find the mapping point P of the target matrix midpoint in the source data matrix, then find the 16 points around the P point, and then according to P The distance between the point coordinates and the 16 points in the x and y directions is used to calculate the weight of each point using the BiCubic function. Finally, after multiplying each point by the weight, the value of P can be obtained by adding up.

BiCubic function:

Among them, when a is -0.5, the BiCubic function has the following shape:

Take a= At -0.5, the enlarged data is quite good, the generated image is very smooth and retains a lot of details.
I haven’t studied in depth why this function should be used, but after using this method to amplify the data, the generated picture effect is very good, without mosaic phenomenon

js implementation

/**
 * 数据处理工具类（也可以自己直接定义方法，不用class）
 */class DataUtil {
	constructor() {}}/**
 * 数据插值
 * @param w 目标矩阵宽度
 * @param h 目标矩阵高度
 * @param data 源数据矩阵（二维数组）
 * @param type 插值方式，1：双线性插值，2：双三次插值法
 */DataUtil.scaleData = function(w, h, data, type = 2) {
	let t1 = new Date().getTime();
	let dw = data[0].length;
	let dh = data.length;
	
	let resData = new Array(h);
	
	for (let j = 0; j  h - 1 ? h - 1 : py;
		for (let i = 0; i  w - 1 ? w - 1 : px;
			// 该点的值
			let dv = data[py][px];
			// 该点的权重
			let w_x = wx[i];
			let w_y = wy[j];
			// 根据加权加起来
			val += (dv * w_x * w_y);
		}
	}
	
	return val;}/**
 * 双三次插值法中，基于BiCubic基函数，计算源坐标v，最近的4*4的坐标和坐标对应的权重
 * @param v 目标矩阵中坐标对应在源矩阵中坐标值
 */DataUtil.getCubicWeight = function (v){
	let a = -0.5;
	
	// 取整
	let nv = Math.floor(v);
	
	// 坐标差值集合
	let xList = new Array(4);
	// 坐标集合
	let xs = new Array(4);
	
	// 最近的4个坐标差值
	xList[0] = nv - v - 1;
	xList[1] = nv - v
	xList[2] = nv - v + 1;
	xList[3] = nv - v + 2;
	// 
	xs[0] = nv - 1;
	xs[1] = nv;
	xs[2] = nv + 1;
	xs[3] = nv + 2;
	
	// 计算权重
	let ws = new Array(4);
	for (let i = 0; i <p><strong>Related free learning recommendations: </strong><a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript"><strong>javascript</strong></a><strong>(Video)</strong></p>

The above is the detailed content of Implement bilinear interpolation and bicubic interpolation in js. For more information, please follow other related articles on the PHP Chinese website!