更新双线性插值

index.css

@@ -150,7 +150,8 @@ body {
 
 #pic_scale_size,
 #pic_scale_sc,
-#pic_scale_fun {
+#pic_scale_fun,
+#pic_scale_mode {
     display: none;
 }
 

index.html

@@ -28,6 +28,13 @@
             <div class="row" id="pic_info">
                 <div class="row_Text title">图片信息</div>
             </div>
+            <div class="row" id="pic_scale_mode">
+                <div class="row_Text title">缩放模式</div>
+                <div class="inputs">
+                    <input type="radio" name="mode" id="linear" checked="checked">双线性插值法
+                    <input type="radio" name="mode" id="nearby">最邻近插值法
+                </div>
+            </div>
             <div class="row" id="pic_scale_size">
                 <div class="row_Text title">指定大小缩放</div>
                 <div class="inputs">
@@ -37,7 +44,7 @@
                 </div>
                 <div class="scale_size_but row" onclick="scale_size()" id="scale_size_nor">点击缩放</div>
             </div>
-            <div class="row"id="pic_scale_sc">
+            <div class="row" id="pic_scale_sc">
                 <div class="row_Text title">指定比例缩放</div>
                 <div class="inputs">
                     <input class="scale_size" id="scale_size_sc_x" type="text" value="2">
@@ -46,10 +53,10 @@
                 </div>
                 <div class="scale_size_but row" onclick="scale_size_sc()" id="scale_size_sc_nor">点击缩放</div>
             </div>
-            <div class="row"id="pic_scale_fun">
+            <div class="row" id="pic_scale_fun">
                 <div class="row_Text title">趣味功能</div>
-                <div class="scale_size_but row" onclick="scale_size_ma()">马赛克化</div>
-                <div class="scale_size_but row" onclick="animatePic()" id="ani_but">动画模式</div>
+                <div class="scale_size_but row" onclick="scale_size_ma()">群体模糊(x0.3)</div>
+                <div class="scale_size_but row" onclick="animatePic()" id="ani_but">动画模式<br>（很慢！）</div>
             </div>
             <div class="row down" onclick="saveImg()">下载</div>
         </div>

main.js

@@ -1,4 +1,4 @@
-let dropBox, canvasList, imgList, work, imgCols
+let dropBox, canvasList, imgList, work, imgCols, scale_mode, datas
 let canvass = [], imgs = []
 let pic_info
 let multi
@@ -6,7 +6,15 @@ let imgh = [0, 0, 0]
 let ani_mode = 0
 
 let vh = window.innerHeight / 100;
-let vw = window.innerWidth / 100;;
+let vw = window.innerWidth / 100;
+
+function sleep(millisecond) {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve()
+        }, millisecond)
+    })
+}
 
 window.onload = function () {
     dropBox = document.getElementById("dropbox");
@@ -72,6 +80,7 @@ function processFiles(files) {
     document.getElementById("pic_scale_size").style.display = "flex";
     document.getElementById("pic_scale_sc").style.display = "flex";
     document.getElementById("pic_scale_fun").style.display = "flex";
+    document.getElementById("pic_scale_mode").style.display = "flex";
     work.style.display = "flex";
     if (multi == 1) {
         let pic_num = document.createElement('div');
@@ -217,23 +226,71 @@ function scale_size_sc() {
 
 function scale_size_ma() {
     for (let i = 0; i < canvass.length; i++) {
-        // let minx = Math.min(canvass[i].width, canvass[i].height)
-        // let ls = 0;
-        // while (minx) {
-        //     ls++
-        //     minx = Math.floor(minx / 10);
-        // }
-        // if (ls > 2) {
-        //     let scale_s = Math.pow(10, ls-2);
-        //     scale(i, 1 / scale_s, 1 / scale_s)
-        //     scale(i, scale_s, scale_s)
-        // }
-
         scale(i, 0.3, 0.3)
     }
 }
 
-function scale(index, scale_x, scale_y) {
+// 双线性插值辅助计算函数
+function linear_single(x, x1, x2, f1, f2) {
+    return Math.floor(f1 * (x2 - x) / (x2 - x1) + f2 * (x - x1) / (x2 - x1))
+}
+
+function linear_insert(row, col, scale_x, scale_y, datas) {
+    x = row / scale_y
+    y = col / scale_x
+    x1 = Math.floor(x)
+    x2 = Math.ceil(x)
+    y1 = Math.floor(y)
+    y2 = Math.ceil(y)
+    if (x2 >= ori_h) {
+        x2 = x1
+    }
+    if (y2 >= ori_w) {
+        y2 = y1
+    }
+
+    if (x1 == x2 && y1 == y2) {
+        return { 'r': datas[x1][y1][0], 'g': datas[x1][y1][1], 'b': datas[x1][y1][2], 'a': datas[x1][y1][3] }
+    }
+    if (x1 == x2) {
+        x = x1
+        r = linear_single(y, y1, y2, datas[x][y1][0], datas[x][y2][0])
+        g = linear_single(y, y1, y2, datas[x][y1][1], datas[x][y2][1])
+        b = linear_single(y, y1, y2, datas[x][y1][2], datas[x][y2][2])
+        a = linear_single(y, y1, y2, datas[x][y1][3], datas[x][y2][3])
+        return { 'r': r, 'g': g, 'b': b, 'a': a }
+    }
+
+    if (y1 == y2) {
+        y = y1
+        r = linear_single(x, x1, x2, datas[x1][y][0], datas[x2][y][0])
+        g = linear_single(x, x1, x2, datas[x1][y][1], datas[x2][y][1])
+        b = linear_single(x, x1, x2, datas[x1][y][2], datas[x2][y][2])
+        a = linear_single(x, x1, x2, datas[x1][y][3], datas[x2][y][3])
+        return { 'r': r, 'g': g, 'b': b, 'a': a }
+    }
+    fy1_r = linear_single(x, x1, x2, datas[x1][y1][0], datas[x2][y1][0])
+    fy1_g = linear_single(x, x1, x2, datas[x1][y1][1], datas[x2][y1][1])
+    fy1_b = linear_single(x, x1, x2, datas[x1][y1][2], datas[x2][y1][2])
+    fy1_a = linear_single(x, x1, x2, datas[x1][y1][3], datas[x2][y1][3])
+    fy2_r = linear_single(x, x1, x2, datas[x1][y2][0], datas[x2][y2][0])
+    fy2_g = linear_single(x, x1, x2, datas[x1][y2][1], datas[x2][y2][1])
+    fy2_b = linear_single(x, x1, x2, datas[x1][y2][2], datas[x2][y2][2])
+    fy2_a = linear_single(x, x1, x2, datas[x1][y2][3], datas[x2][y2][3])
+    r = linear_single(y, y1, y2, fy1_r, fy2_r)
+    g = linear_single(y, y1, y2, fy1_g, fy2_g)
+    b = linear_single(y, y1, y2, fy1_b, fy2_b)
+    a = linear_single(y, y1, y2, fy1_a, fy2_a)
+    return { 'r': r, 'g': g, 'b': b, 'a': a }
+}
+
+async function scale(index, scale_x, scale_y) {
+    if (document.getElementById("linear").checked) {
+        scale_mode = 0;
+    }
+    else {
+        scale_mode = 1;
+    }
     canvas = canvass[index]
     cxt = canvas.getContext("2d")
     imgData = cxt.getImageData(0, 0, canvas.width, canvas.height);
@@ -244,6 +301,15 @@ function scale(index, scale_x, scale_y) {
     ori_w = imgData.width;
     ori_h = imgData.height;
 
+    if (ani_mode) {
+        document.getElementById("c2").style.display = "flex"
+        document.getElementById("c2").append(canvas2);
+        document.getElementById("c2").style['justify-content'] = "center"
+
+        document.getElementById("c1").style.width = 70 * vw / (scale_x + 1) + "px"
+        document.getElementById("c2").style.width = 70 * vw * scale_x / (scale_x + 1) + "px"
+    }
+
     canvas2.setAttribute("height", ori_h * scale_y + "px");
     canvas2.setAttribute("width", ori_w * scale_x + "px");
     canvas2.setAttribute("id", "canvas_" + index)
@@ -259,13 +325,24 @@ function scale(index, scale_x, scale_y) {
 
     for (let i = 0; i < ori_h * scale_y; i++) {
         for (let j = 0; j < ori_w * scale_x; j++) {
-            red = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][0];
-            green = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][1];
-            blue = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][2];
-            alpha = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][3];
+            if (scale_mode == 0) {
+                re = linear_insert(i, j, scale_x, scale_y, datas)
+                red = re['r']
+                green = re['g']
+                blue = re['b']
+                alpha = re['a']
+            }
+            else if (scale_mode == 1) {
+                red = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][0];
+                green = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][1];
+                blue = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][2];
+                alpha = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][3];
+            }
             ctx.fillStyle = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
             ctx.fillRect(j, i, 1, 1)
+            if (ani_mode) if (j % 100 == 0) await sleep(1);
         }
+        if (ani_mode) if (i % 2 == 0) await sleep(5);
     }
 
     let imgdata = canvas2.toDataURL();
@@ -273,7 +350,6 @@ function scale(index, scale_x, scale_y) {
     newImg.src = imgdata;
 
     if (multi == 1) {
-
         newImg.setAttribute("width", 20 * vw + "px")
         document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
         document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
@@ -287,6 +363,15 @@ function scale(index, scale_x, scale_y) {
 
         document.getElementById("size").innerHTML = "尺寸：" + canvas2.width + " x " + canvas2.height
 
+        if (ani_mode) {
+            await sleep(500);
+            document.getElementById("c1").style.width = 70 * vw + "px"
+            document.getElementById("c2").style.display = "none";
+            document.getElementById("c2").removeChild(canvas2);
+        }
+
+        if (canvas2.height > 90 * vh) document.getElementById("c1").style['justify-content'] = "flex-start";
+
         document.getElementById("c1").replaceChild(newImg, imgs[index]);
         canvasList.replaceChild(canvas2, canvass[index]);
 
@@ -300,14 +385,12 @@ function saveImg() {
         let blobs = []
         for (let i = 0; i < canvass.length; i++) {
             canvass[i].toBlob(function (blob) {
-                console.log(blob)
                 saveAs(blob, "yiipic_" + (i + 1) + ".png");
             });
         }
     }
     else {
         canvass[0].toBlob(function (blob) {
-            console.log(blob)
             saveAs(blob, "yiipic.png");
         });
     }
@@ -315,7 +398,7 @@ function saveImg() {
 
 function animatePic() {
     ani_mode = !ani_mode
-    if(ani_mode){
+    if (ani_mode) {
         document.getElementById("ani_but").style.color = "red"
     }
     else {