js插值计算_js图像处理 双线性插值 双三次插值法 实现

介绍

在网页中利用canvas进行绘图时，遇到一个问题，原始的数据分辨率很小，而图片要放大到整个网页，所以需要把数据进行插值放大。学习了双线性插值和三次内插法插值，两种方式实现效果不同，双线性插值放大后，会有明显的马赛克，而三次内插法则比较平滑，当然耗时也长一点。

两种方法，参考了其他的文章，我都用js代码来实现了一下，下面给大家分享一下

下面的两个方法，原始数据，每个点都只有一个值，如果原始数据是一张图片，要进行缩放，则可以用canvas取到每个点的rgb值，然后分别对rgb三个通道进行插值即可。

双线性插值

原理

双线性插值即在x和y两个方向上，对数据各进行一次线性插值。

原始数据的矩阵，即一个二维数组，大小为a*b，目标矩阵大小为m*n，m、n比a、b可以大(放大)，也可以小(缩小)，当然比例也可以不一样, 取决于你插值后的数据需要多大。

基本思想为，遍历目标矩阵的坐标，如x*y这个点，找到这个点在原始矩阵中对应的位置，称为映射点P，然后找到这个映射点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的值。