From b06047ec71df8576ced73c0fabb238973d26c23d Mon Sep 17 00:00:00 2001 From: Luthics Date: Fri, 23 Dec 2022 23:58:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E5=BC=A0=E5=9B=BE=E7=89=87=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FileSaver.js | 3 + index.css | 22 +++++- index.html | 10 ++- main.js | 206 ++++++++++++++++++++++++++++++++++----------------- 4 files changed, 167 insertions(+), 74 deletions(-) create mode 100644 FileSaver.js diff --git a/FileSaver.js b/FileSaver.js new file mode 100644 index 0000000..6d493b2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/index.css b/index.css index d2810c6..d82408f 100644 --- a/index.css +++ b/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; } @@ -138,4 +152,10 @@ body { #pic_scale_sc, #pic_scale_fun { display: none; +} + +#scale_size_ani, +#scale_size_sc_ani, +#ani_but { + display: none; } \ No newline at end of file diff --git a/index.html b/index.html index 8c82cdd..21a4aab 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,8 @@ x -
点击缩放
+
点击缩放
+
点击缩放
指定比例缩放
@@ -44,17 +45,20 @@ x
-
点击缩放
+
点击缩放
+
点击缩放
趣味功能
马赛克化
+
动画模式
-
下载
+
下载
+ \ No newline at end of file diff --git a/main.js b/main.js index 49fd342..3d0b4b0 100644 --- a/main.js +++ b/main.js @@ -1,11 +1,11 @@ -var dropBox, canvasList, imgList, work, imgCols -var canvass = [], imgs = [] -var pic_info -var multi -var imgh = [0, 0, 0] +let dropBox, canvasList, imgList, work, imgCols +let canvass = [], imgs = [] +let pic_info +let multi +let imgh = [0, 0, 0] -var vh = window.innerHeight / 100; -var vw = window.innerWidth / 100;; +let vh = window.innerHeight / 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; - var files = [] - for (var i = 0; i < data.files.length; i++) { - var file_type = data.files[i].type; + let data = e.dataTransfer; + let files = [] + for (let i = 0; i < data.files.length; i++) { + 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'); - pic_num.setAttribute("class", "row_Text"); - pic_num.innerHTML = "图片数量：" + files.length + " 张" - pic_info.appendChild(pic_num) - var canvas_i = 0; - for (var i = 0; i < files.length; i++) { - var reader = new FileReader(); + if (multi == 1) { + let pic_num = document.createElement('div'); + pic_num.setAttribute("class", "row_Text"); + pic_num.innerHTML = "图片数量：" + files.length + " 张" + pic_info.appendChild(pic_num) + + 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; - var height = image.height; - var canvas = document.createElement('canvas'); - var ctx = canvas.getContext("2d"); + let width = image.width; + let height = image.height; + + 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); - canvas_i++; - // imgList.appendChild(image); - // dropBox.style.backgroundImage = "url('" + e.target.result + "')"; + if (canvas.width > 60 * vw) image.setAttribute("width", 60 * vw + "px") + document.getElementById("c1").appendChild(image) + document.getElementById("c1").style.width = 70 * vw + "px" + + 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'); - var imgdesp = document.createElement('div'); + let imgdiv = 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 @@ -164,9 +226,8 @@ function scale_size_ma() { // scale(i, 1 / scale_s, 1 / scale_s) // scale(i, scale_s, scale_s) // } - + 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]); - document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height; - canvasList.replaceChild(canvas2, canvass[index]); + if (multi == 1) { - canvass[index] = canvas2; - imgs[index] = newImg; + 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; + 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'); -// let cxt = canvas.getContext('2d'); -// let l = canvas.width / 2; -// const PI = Math.PI; -// cxt.translate(l, l); - -// let createTaiChi = () => { -// cxt.clearRect(-l, -l, l, l); -// cxt.arc(0, 0, l, 0, 2 * PI, 0); -// cxt.stroke(); -// cxt.beginPath(); -// cxt.arc(0, -l / 2, l / 2, -PI / 2, PI / 2, 0); -// cxt.arc(0, l / 2, l / 2, 3 / 2 * PI, PI / 2, 1); -// cxt.arc(0, 0, l, PI / 2, PI * 3 / 2, 0); -// 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(); - +function saveImg() { + if (multi == 1) { + 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"); + }); + } +} \ No newline at end of file