index.css

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

index.html

@@ -28,13 +28,6 @@
             <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">
@@ -44,7 +37,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">
@@ -53,10 +46,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()">群体模糊(x0.3)</div>
+                <div class="scale_size_but row" onclick="scale_size_ma()">马赛克化</div>
-                <div class="scale_size_but row" onclick="animatePic()" id="ani_but">动画模式<br>（很慢！）</div>
+                <div class="scale_size_but row" onclick="animatePic()" id="ani_but">动画模式</div>
             </div>
             <div class="row down" onclick="saveImg()">下载</div>
         </div>

main.js

@@ -1,4 +1,4 @@
-let dropBox, canvasList, imgList, work, imgCols, scale_mode, datas
+let dropBox, canvasList, imgList, work, imgCols
 let canvass = [], imgs = []
 let pic_info
 let multi
@@ -6,15 +6,7 @@ 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");
@@ -80,7 +72,6 @@ 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');
@@ -226,71 +217,23 @@ 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);
@@ -301,15 +244,6 @@ async 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)
@@ -325,24 +259,13 @@ async 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++) {
-            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();
@@ -350,6 +273,7 @@ async 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;
@@ -363,15 +287,6 @@ async 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]);
 
@@ -385,12 +300,14 @@ 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");
         });
     }
@@ -398,7 +315,7 @@ function saveImg() {
 
 function animatePic() {
     ani_mode = !ani_mode
-    if (ani_mode) {
+    if(ani_mode){
         document.getElementById("ani_but").style.color = "red"
     }
     else {