Image-Editor-JavaScript/script.js at master · yoseflakew25/Image-Editor-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
constfileInput=document.querySelector(".file-input"),
filterOptions=document.querySelectorAll(".filter button"),
filterName=document.querySelector(".filter-info .name"),
filterValue=document.querySelector(".filter-info .value"),
filterSlider=document.querySelector(".slider input"),
rotateOptions=document.querySelectorAll(".rotate button"),
previewImg=document.querySelector(".preview-img img"),
resetFilterBtn=document.querySelector(".reset-filter"),
chooseImgBtn=document.querySelector(".choose-img"),
saveImgBtn=document.querySelector(".save-img");

letbrightness="100",saturation="100",inversion="0",grayscale="0";
letrotate=0,flipHorizontal=1,flipVertical=1;

constloadImage=()=>{
letfile=fileInput.files[0];
if(!file)return;
previewImg.src=URL.createObjectURL(file);
previewImg.addEventListener("load",()=>{
resetFilterBtn.click();
document.querySelector(".container").classList.remove("disable");
});
}

constapplyFilter=()=>{
previewImg.style.transform=`rotate(${rotate}deg) scale(${flipHorizontal}, ${flipVertical})`;
previewImg.style.filter=`brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`;
}

filterOptions.forEach(option=>{
option.addEventListener("click",()=>{
document.querySelector(".active").classList.remove("active");
option.classList.add("active");
filterName.innerText=option.innerText;

if(option.id==="brightness"){
filterSlider.max="200";
filterSlider.value=brightness;
filterValue.innerText=`${brightness}%`;
}elseif(option.id==="saturation"){
filterSlider.max="200";
filterSlider.value=saturation;
filterValue.innerText=`${saturation}%`
}elseif(option.id==="inversion"){
filterSlider.max="100";
filterSlider.value=inversion;
filterValue.innerText=`${inversion}%`;
}else{
filterSlider.max="100";
filterSlider.value=grayscale;
filterValue.innerText=`${grayscale}%`;
}
});
});

constupdateFilter=()=>{
filterValue.innerText=`${filterSlider.value}%`;
constselectedFilter=document.querySelector(".filter .active");

if(selectedFilter.id==="brightness"){
brightness=filterSlider.value;
}elseif(selectedFilter.id==="saturation"){
saturation=filterSlider.value;
}elseif(selectedFilter.id==="inversion"){
inversion=filterSlider.value;
}else{
grayscale=filterSlider.value;
}
applyFilter();
}

rotateOptions.forEach(option=>{
option.addEventListener("click",()=>{
if(option.id==="left"){
rotate-=90;
}elseif(option.id==="right"){
rotate+=90;
}elseif(option.id==="horizontal"){
flipHorizontal=flipHorizontal===1 ? -1 : 1;
}else{
flipVertical=flipVertical===1 ? -1 : 1;
}
applyFilter();
});
});

constresetFilter=()=>{
brightness="100";saturation="100";inversion="0";grayscale="0";
rotate=0;flipHorizontal=1;flipVertical=1;
filterOptions[0].click();
applyFilter();
}

constsaveImage=()=>{
constcanvas=document.createElement("canvas");
constctx=canvas.getContext("2d");
canvas.width=previewImg.naturalWidth;
canvas.height=previewImg.naturalHeight;

ctx.filter=`brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`;
ctx.translate(canvas.width/2,canvas.height/2);
if(rotate!==0){
ctx.rotate(rotate*Math.PI/180);
}
ctx.scale(flipHorizontal,flipVertical);
ctx.drawImage(previewImg,-canvas.width/2,-canvas.height/2,canvas.width,canvas.height);

constlink=document.createElement("a");
link.download="image.jpg";
link.href=canvas.toDataURL();
link.click();
}

filterSlider.addEventListener("input",updateFilter);
resetFilterBtn.addEventListener("click",resetFilter);
saveImgBtn.addEventListener("click",saveImage);
fileInput.addEventListener("change",loadImage);
chooseImgBtn.addEventListener("click",()=>fileInput.click());