Luthics
/
web-image-factory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增趣味功能一个

This commit is contained in:
Luthics 2022-12-23 18:00:54 +08:00
parent 7654941dca
commit 5c459002ca
3 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.css
View File

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

4
index.html
View File

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

22
main.js
View File

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