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:23:59 +08:00
parent ed9801d9db
commit 65574002ef
1 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
main.js
View File

@ -6,7 +6,15 @@ let imgh = [0, 0, 0]
let ani_mode = 0
let vh = window.innerHeight / 100;
let vw = window.innerWidth / 100;;
let vw = window.innerWidth / 100;
function sleep(millisecond) {
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, millisecond)
})
}
window.onload = function () {
dropBox = document.getElementById("dropbox");
@ -233,7 +241,7 @@ function scale_size_ma() {
}
}
function scale(index, scale_x, scale_y) {
async function scale(index, scale_x, scale_y) {
canvas = canvass[index]
cxt = canvas.getContext("2d")
imgData = cxt.getImageData(0, 0, canvas.width, canvas.height);
@ -244,6 +252,16 @@ function scale(index, scale_x, scale_y) {
ori_w = imgData.width;
ori_h = imgData.height;
if (ani_mode) {
document.getElementById("c2").style.display = "flex"
document.getElementById("c2").append(canvas2);
document.getElementById("c1").style['justify-content'] = "center"
document.getElementById("c2").style['justify-content'] = "center"
document.getElementById("c1").style.width = 70 * vw / (scale_x + 1) + "px"
document.getElementById("c2").style.width = 70 * vw * scale_x / (scale_x + 1) + "px"
}
canvas2.setAttribute("height", ori_h * scale_y + "px");
canvas2.setAttribute("width", ori_w * scale_x + "px");
canvas2.setAttribute("id", "canvas_" + index)
@ -266,6 +284,7 @@ function scale(index, scale_x, scale_y) {
ctx.fillStyle = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
ctx.fillRect(j, i, 1, 1)
}
await sleep(10);
}
let imgdata = canvas2.toDataURL();
@ -273,7 +292,6 @@ function scale(index, scale_x, scale_y) {
newImg.src = imgdata;
if (multi == 1) {
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;
@ -287,6 +305,15 @@ function scale(index, scale_x, scale_y) {
document.getElementById("size").innerHTML = "尺寸：" + canvas2.width + " x " + canvas2.height
if (ani_mode) {
await sleep(500);
document.getElementById("c1").style.width = 70 * vw + "px"
document.getElementById("c2").style.display = "none";
document.getElementById("c2").removeChild(canvas2);
}
if (canvas2.height > 90 * vh) document.getElementById("c1").style['justify-content'] = "flex-start";
document.getElementById("c1").replaceChild(newImg, imgs[index]);
canvasList.replaceChild(canvas2, canvass[index]);
@ -315,7 +342,7 @@ function saveImg() {
function animatePic() {
ani_mode = !ani_mode
if(ani_mode){
if (ani_mode) {
document.getElementById("ani_but").style.color = "red"
}
else {