新增趣味功能一个

index.css

@@ -93,18 +93,18 @@ body {
     font-size: large;
 }
 
-.inputs{
+.inputs {
     justify-content: flex-start;
 }
 
-.scale_size{
+.scale_size {
     display: flex;
     font-size: medium;
     margin: 0 3px;
     width: 4vw;
 }
 
-.scale_size_but{
+.scale_size_but {
     width: 7vw;
     height: 5vh;
     background-color: white;
@@ -130,19 +130,12 @@ body {
     font-size: xx-large;
 }
 
-#canvasList {
-    display: none;
-    /* flex-direction: column; */
-}
-
-#fileInput {
+#canvasList,#fileInput {
     display: none;
 }
 
-#pic_scale_size {
-    display: none;
-}
-
-#pic_scale_sc {
+#pic_scale_size,
+#pic_scale_sc,
+#pic_scale_fun {
     display: none;
 }

index.html

@@ -46,6 +46,10 @@
                 </div>
                 <div class="scale_size_but row" onclick="scale_size_sc()">点击缩放</div>
             </div>
+            <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>
             <div class="row down">下载</div>
         </div>
         <!-- <canvas id="Canvas" width="256px" height="256px"></canvas>

main.js

@@ -70,6 +70,7 @@ function processFiles(files) {
     document.getElementById("drop").style.display = "none";
     document.getElementById("pic_scale_size").style.display = "flex";
     document.getElementById("pic_scale_sc").style.display = "flex";
+    document.getElementById("pic_scale_fun").style.display = "flex";
     work.style.display = "flex";
     var pic_num = document.createElement('div');
     pic_num.setAttribute("class", "row_Text");
@@ -142,7 +143,7 @@ function scale_size() {
     }
 }
 
-function scale_size_sc(){
+function scale_size_sc() {
     let scale_x = parseFloat(document.getElementById("scale_size_sc_x").value);
     let scale_y = parseFloat(document.getElementById("scale_size_sc_y").value);
     for (let i = 0; i < canvass.length; i++) {
@@ -150,6 +151,25 @@ 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)
+        // scale(i, 5, 5)
+    }
+}
+
 function scale(index, scale_x, scale_y) {
     canvas = canvass[index]
     cxt = canvas.getContext("2d")