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-24 00:05:33 +08:00
parent b06047ec71
commit ed9801d9db
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -36,7 +36,6 @@
<input class="scale_size" id="scale_size_height" type="number" min="0" max="10000" value="128"> <input class="scale_size" id="scale_size_height" type="number" min="0" max="10000" value="128">
</div> </div>
<div class="scale_size_but row" onclick="scale_size()" id="scale_size_nor">点击缩放</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>
<div class="row"id="pic_scale_sc"> <div class="row"id="pic_scale_sc">
<div class="row_Text title">指定比例缩放</div> <div class="row_Text title">指定比例缩放</div>
@ -46,12 +45,11 @@
<input class="scale_size" id="scale_size_sc_y" type="text" value="2"> <input class="scale_size" id="scale_size_sc_y" type="text" value="2">
</div> </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()" 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>
<div class="row"id="pic_scale_fun"> <div class="row"id="pic_scale_fun">
<div class="row_Text title">趣味功能</div> <div class="row_Text title">趣味功能</div>
<div class="scale_size_but row" onclick="scale_size_ma()">马赛克化</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 class="scale_size_but row" onclick="animatePic()" id="ani_but">动画模式</div>
</div> </div>
<div class="row down" onclick="saveImg()">下载</div> <div class="row down" onclick="saveImg()">下载</div>
</div> </div>

12
main.js
View File

@ -3,6 +3,7 @@ let canvass = [], imgs = []
let pic_info let pic_info
let multi let multi
let imgh = [0, 0, 0] let imgh = [0, 0, 0]
let ani_mode = 0
let vh = window.innerHeight / 100; let vh = window.innerHeight / 100;
let vw = window.innerWidth / 100;; let vw = window.innerWidth / 100;;
@ -157,6 +158,7 @@ function processFiles(files) {
if (canvas.width > 60 * vw) image.setAttribute("width", 60 * vw + "px") if (canvas.width > 60 * vw) image.setAttribute("width", 60 * vw + "px")
document.getElementById("c1").appendChild(image) document.getElementById("c1").appendChild(image)
document.getElementById("c1").style.width = 70 * vw + "px" document.getElementById("c1").style.width = 70 * vw + "px"
document.getElementById("c1").style['justify-content'] = "center"
imgs.push(image); imgs.push(image);
@ -309,4 +311,14 @@ function saveImg() {
saveAs(blob, "yiipic.png"); saveAs(blob, "yiipic.png");
}); });
} }
}
function animatePic() {
ani_mode = !ani_mode
if(ani_mode){
document.getElementById("ani_but").style.color = "red"
}
else {
document.getElementById("ani_but").style.color = "black"
}
} }