单张图片逻辑完成

FileSaver.js

@@ -0,0 +1,3 @@
+(function(a,b){if("function"==typeof define&&define.amd)define([],b);else if("undefined"!=typeof exports)b();else{b(),a.FileSaver={exports:{}}.exports}})(this,function(){"use strict";function b(a,b){return"undefined"==typeof b?b={autoBom:!1}:"object"!=typeof b&&(console.warn("Deprecated: Expected third argument to be a object"),b={autoBom:!b}),b.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type)?new Blob(["\uFEFF",a],{type:a.type}):a}function c(a,b,c){var d=new XMLHttpRequest;d.open("GET",a),d.responseType="blob",d.onload=function(){g(d.response,b,c)},d.onerror=function(){console.error("could not download file")},d.send()}function d(a){var b=new XMLHttpRequest;b.open("HEAD",a,!1);try{b.send()}catch(a){}return 200<=b.status&&299>=b.status}function e(a){try{a.dispatchEvent(new MouseEvent("click"))}catch(c){var b=document.createEvent("MouseEvents");b.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),a.dispatchEvent(b)}}var f="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof global&&global.global===global?global:void 0,a=/Macintosh/.test(navigator.userAgent)&&/AppleWebKit/.test(navigator.userAgent)&&!/Safari/.test(navigator.userAgent),g=f.saveAs||("object"!=typeof window||window!==f?function(){}:"download"in HTMLAnchorElement.prototype&&!a?function(b,g,h){var i=f.URL||f.webkitURL,j=document.createElement("a");g=g||b.name||"download",j.download=g,j.rel="noopener","string"==typeof b?(j.href=b,j.origin===location.origin?e(j):d(j.href)?c(b,g,h):e(j,j.target="_blank")):(j.href=i.createObjectURL(b),setTimeout(function(){i.revokeObjectURL(j.href)},4E4),setTimeout(function(){e(j)},0))}:"msSaveOrOpenBlob"in navigator?function(f,g,h){if(g=g||f.name||"download","string"!=typeof f)navigator.msSaveOrOpenBlob(b(f,h),g);else if(d(f))c(f,g,h);else{var i=document.createElement("a");i.href=f,i.target="_blank",setTimeout(function(){e(i)})}}:function(b,d,e,g){if(g=g||open("","_blank"),g&&(g.document.title=g.document.body.innerText="downloading..."),"string"==typeof b)return c(b,d,e);var h="application/octet-stream"===b.type,i=/constructor/i.test(f.HTMLElement)||f.safari,j=/CriOS\/[\d]+/.test(navigator.userAgent);if((j||h&&i||a)&&"undefined"!=typeof FileReader){var k=new FileReader;k.onloadend=function(){var a=k.result;a=j?a:a.replace(/^data:[^;]*;/,"data:attachment/file;"),g?g.location.href=a:location=a,g=null},k.readAsDataURL(b)}else{var l=f.URL||f.webkitURL,m=l.createObjectURL(b);g?g.location=m:location.href=m,g=null,setTimeout(function(){l.revokeObjectURL(m)},4E4)}});f.saveAs=g.saveAs=g,"undefined"!=typeof module&&(module.exports=g)});
+
+//# sourceMappingURL=FileSaver.min.js.map

index.css

@@ -49,6 +49,9 @@ body {
     margin-top: auto;
     margin-bottom: 5vh;
     justify-self: flex-end;
+    width: 8vw;
+    cursor: pointer;
+    border: 1px solid black;
 }
 
 .right {
@@ -82,6 +85,16 @@ body {
     display: none;
 }
 
+#canvasList {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+#canvasList::-webkit-scrollbar {
+    display: none;
+}
+
 .imgcard {
     margin: 5px 0;
     border: 3px dotted gray;
@@ -130,7 +143,8 @@ body {
     font-size: xx-large;
 }
 
-#canvasList,#fileInput {
+#canvasList,
+#fileInput {
     display: none;
 }
 
@@ -139,3 +153,9 @@ body {
 #pic_scale_fun {
     display: none;
 }
+
+#scale_size_ani,
+#scale_size_sc_ani,
+#ani_but {
+    display: none;
+}

index.html

@@ -35,7 +35,8 @@
                     x
                     <input class="scale_size" id="scale_size_height" type="number" min="0" max="10000" value="128">
                 </div>
-                <div class="scale_size_but row" onclick="scale_size()">点击缩放</div>
+                <div class="scale_size_but row" onclick="scale_size()" id="scale_size_nor">点击缩放</div>
+                <div class="scale_size_but row" onclick="scale_size_ani()" id="scale_size_ani">点击缩放</div>
             </div>
             <div class="row"id="pic_scale_sc">
                 <div class="row_Text title">指定比例缩放</div>
@@ -44,17 +45,20 @@
                     x
                     <input class="scale_size" id="scale_size_sc_y" type="text" value="2">
                 </div>
-                <div class="scale_size_but row" onclick="scale_size_sc()">点击缩放</div>
+                <div class="scale_size_but row" onclick="scale_size_sc()" id="scale_size_sc_nor">点击缩放</div>
+                <div class="scale_size_but row" onclick="scale_size_sc_ani()" id="scale_size_sc_ani">点击缩放</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 class="scale_size_but row" onclick="animate()" id="ani_but">动画模式</div>
             </div>
-            <div class="row down">下载</div>
+            <div class="row down" onclick="saveImg()">下载</div>
         </div>
         <!-- <canvas id="Canvas" width="256px" height="256px"></canvas>
             <canvas id="Canvas2" width="512px" height="512px"></canvas> -->
     </div>
     <script src="jquery-3.6.1.min.js"></script>
+    <script src="FileSaver.js"></script>
     <script src="main.js"></script>
 </body>

main.js

@@ -1,11 +1,11 @@
-var dropBox, canvasList, imgList, work, imgCols
+let dropBox, canvasList, imgList, work, imgCols
-var canvass = [], imgs = []
+let canvass = [], imgs = []
-var pic_info
+let pic_info
-var multi
+let multi
-var imgh = [0, 0, 0]
+let imgh = [0, 0, 0]
 
-var vh = window.innerHeight / 100;
+let vh = window.innerHeight / 100;
-var vw = window.innerWidth / 100;;
+let vw = window.innerWidth / 100;;
 
 window.onload = function () {
     dropBox = document.getElementById("dropbox");
@@ -37,10 +37,10 @@ function dropFileOver(e) {
 function dropFile(e) {
     e.stopPropagation();
     e.preventDefault();
-    var data = e.dataTransfer;
+    let data = e.dataTransfer;
-    var files = []
+    let files = []
-    for (var i = 0; i < data.files.length; i++) {
+    for (let i = 0; i < data.files.length; i++) {
-        var file_type = data.files[i].type;
+        let file_type = data.files[i].type;
         if (file_type.substr(0, 5) == "image") {
             files.push(data.files[i]);
         }
@@ -61,7 +61,7 @@ function noFileError() {
 }
 
 function selectFile() {
-    var fileInput = document.getElementById("fileInput");
+    let fileInput = document.getElementById("fileInput");
     fileInput.click();
 }
 
@@ -72,53 +72,115 @@ function processFiles(files) {
     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');
+    if (multi == 1) {
-    pic_num.setAttribute("class", "row_Text");
+        let pic_num = document.createElement('div');
-    pic_num.innerHTML = "图片数量：" + files.length + " 张"
+        pic_num.setAttribute("class", "row_Text");
-    pic_info.appendChild(pic_num)
+        pic_num.innerHTML = "图片数量：" + files.length + " 张"
-    var canvas_i = 0;
+        pic_info.appendChild(pic_num)
-    for (var i = 0; i < files.length; i++) {
+
-        var reader = new FileReader();
+        let canvas_i = 0;
+        for (let i = 0; i < files.length; i++) {
+            let reader = new FileReader();
+            reader.onload = function (e) {
+                let image = new Image();
+                image.src = e.target.result;
+                image.onload = function () {
+                    let width = image.width;
+                    let height = image.height;
+                    let canvas = document.createElement('canvas');
+                    let ctx = canvas.getContext("2d");
+                    canvas.setAttribute("width", width + "px")
+                    canvas.setAttribute("height", height + "px")
+                    canvas.setAttribute("id", "canvas_" + canvas_i);
+
+                    ctx.drawImage(image, 0, 0);
+
+                    canvass.push(canvas)
+
+                    canvasList.appendChild(canvas);
+
+                    imgInsert(image, canvas_i);
+                    canvas_i++;
+                };
+            };
+            reader.readAsDataURL(files[i]);
+        }
+    }
+    else {
+        let file = files[0]
+        let ls = 4, rows = [];
+        while (ls--) {
+            let row = document.createElement('div')
+            row.setAttribute("class", "row_Text");
+            rows.push(row)
+        }
+        rows[0].innerHTML = "文件名：" + file.name
+        rows[1].innerHTML = "文件大小：" + file.size
+        rows[2].innerHTML = "文件类型：" + file.type
+        rows[3].innerHTML = "最后修改：" + file.lastModifiedDate
+
+        for (let i = 0; i < rows.length; i++) {
+            pic_info.appendChild(rows[i])
+        }
+
+        document.getElementById("ani_but").style.display = "flex"
+
+        document.getElementById("c2").style.display = "none"
+        document.getElementById("c3").style.display = "none"
+
+        let reader = new FileReader();
         reader.onload = function (e) {
-            var image = new Image();
+            let image = new Image();
             image.src = e.target.result;
             image.onload = function () {
-                var width = image.width;
+                let width = image.width;
-                var height = image.height;
+                let height = image.height;
-                var canvas = document.createElement('canvas');
+
-                var ctx = canvas.getContext("2d");
+                let row = document.createElement('div')
+                row.setAttribute("class", "row_Text");
+                row.setAttribute("id", "size")
+                row.innerHTML = "尺寸：" + width + " x " + height
+                pic_info.appendChild(row)
+
+                let canvas = document.createElement('canvas')
+                let ctx = canvas.getContext("2d")
+
                 canvas.setAttribute("width", width + "px")
                 canvas.setAttribute("height", height + "px")
-                canvas.setAttribute("id", "canvas_" + canvas_i);
+                canvas.setAttribute("id", "canvas");
 
                 ctx.drawImage(image, 0, 0);
 
                 canvass.push(canvas)
-
                 canvasList.appendChild(canvas);
 
-                imgInsert(image, canvas_i);
+                if (canvas.width > 60 * vw) image.setAttribute("width", 60 * vw + "px")
-                canvas_i++;
+                document.getElementById("c1").appendChild(image)
-                // imgList.appendChild(image);
+                document.getElementById("c1").style.width = 70 * vw + "px"
-                // dropBox.style.backgroundImage = "url('" + e.target.result + "')";
+
+                imgs.push(image);
+
+                document.getElementById("scale_size_width").value = Math.round(width / 2)
+                document.getElementById("scale_size_height").value = Math.round(height / 2)
+
             };
         };
-        reader.readAsDataURL(files[i]);
+        reader.readAsDataURL(file);
     }
 }
 
 function findex(value, arr) {
-    for (var i = 0; i < arr.length; i++) {
+    for (let i = 0; i < arr.length; i++) {
         if (arr[i] == value) return i;
     }
     return null;
 }
 
 function imgInsert(img, index) {
-    var i = findex(Math.min(...imgh), imgh)
+    let i = findex(Math.min(...imgh), imgh)
     imgh[i] += img.height / img.width * 20 * vw + 24;
-    var imgdiv = document.createElement('div');
+    let imgdiv = document.createElement('div');
-    var imgdesp = document.createElement('div');
+    let imgdesp = document.createElement('div');
     imgdiv.setAttribute("class", "imgcard")
     imgdesp.setAttribute("class", "imgdesp")
     imgdesp.innerHTML = "[" + (index + 1) + "] " + img.width + " x " + img.height
@@ -166,7 +228,6 @@ function scale_size_ma() {
         // }
 
         scale(i, 0.3, 0.3)
-        // scale(i, 5, 5)
     }
 }
 
@@ -204,43 +265,48 @@ function scale(index, scale_x, scale_y) {
             ctx.fillRect(j, i, 1, 1)
         }
     }
+
     let imgdata = canvas2.toDataURL();
     newImg = new Image();
     newImg.src = imgdata;
-    newImg.setAttribute("width", 20 * vw + "px")
 
-    document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
+    if (multi == 1) {
-    document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
-    canvasList.replaceChild(canvas2, canvass[index]);
 
-    canvass[index] = canvas2;
+        newImg.setAttribute("width", 20 * vw + "px")
-    imgs[index] = newImg;
+        document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
+        document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
+        canvasList.replaceChild(canvas2, canvass[index]);
+
+        canvass[index] = canvas2;
+        imgs[index] = newImg;
+    }
+    else {
+        if (canvas2.width > 60 * vw) newImg.setAttribute("width", 60 * vw + "px")
+
+        document.getElementById("size").innerHTML = "尺寸：" + canvas2.width + " x " + canvas2.height
+
+        document.getElementById("c1").replaceChild(newImg, imgs[index]);
+        canvasList.replaceChild(canvas2, canvass[index]);
+
+        canvass[index] = canvas2;
+        imgs[index] = newImg;
+    }
 }
 
-// canvas = document.getElementById('Canvas');
+function saveImg() {
-// let cxt = canvas.getContext('2d');
+    if (multi == 1) {
-// let l = canvas.width / 2;
+        let blobs = []
-// const PI = Math.PI;
+        for (let i = 0; i < canvass.length; i++) {
-// cxt.translate(l, l);
+            canvass[i].toBlob(function (blob) {
-
+                console.log(blob)
-// let createTaiChi = () => {
+                saveAs(blob, "yiipic_" + (i + 1) + ".png");
-//     cxt.clearRect(-l, -l, l, l);
+            });
-//     cxt.arc(0, 0, l, 0, 2 * PI, 0);
+        }
-//     cxt.stroke();
+    }
-//     cxt.beginPath();
+    else {
-//     cxt.arc(0, -l / 2, l / 2, -PI / 2, PI / 2, 0);
+        canvass[0].toBlob(function (blob) {
-//     cxt.arc(0, l / 2, l / 2, 3 / 2 * PI, PI / 2, 1);
+            console.log(blob)
-//     cxt.arc(0, 0, l, PI / 2, PI * 3 / 2, 0);
+            saveAs(blob, "yiipic.png");
-//     cxt.fill();
+        });
-//     cxt.beginPath();
+    }
-//     cxt.fillStyle = '#fff';
+}
-//     cxt.arc(0, -l / 2, l / 7, 0, PI * 2, 0);
-//     cxt.fill();
-//     cxt.beginPath();
-//     cxt.fillStyle = '#000';
-//     cxt.arc(0, l / 2, l / 7, 0, PI * 2, 0);
-//     cxt.fill();
-// };
-
-// createTaiChi();
-