Skip to content

GitLab

Commit ce0fd433 authored by Sonu Kumar's avatar Sonu Kumar
Browse files

first commit

parents
main
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 285 additions and 0 deletions
+285 -0
adam-stefanca.jpg 0 → 100644
View file @ ce0fd433
adam-stefanca.jpg

3.09 MB

compressor.js 0 → 100644
View file @ ce0fd433
This diff is collapsed.
index.html 0 → 100644
View file @ ce0fd433
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Compressor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="input">
<button class="upload">Upload</button>
<ul class="metadata">
<li>Name: <span></span></li>.
<li>Dimension: <span></span></li>
<li>Size: <span></span></li>
</ul>
</div>
<div class="output">
<button class="download">Download</button>
<ul class="metadata">
<li>Compressed: <span></span></li>
<li>Dimension: <span></span></li>
<li>Size: <span></span></li>
</ul>
</div>
</div>
<div class="progress">
<div class="track"></div>
<input type="range" class="input-value" min="10" value="30" max="99" step="any">
</div>
<div class="preview-container">
<input type="range" id="slider-input" min="0" max="100" step="any">
<div class="compressed">Compressed</div>
<div class="original">Original</div>
<div class="bottom">
<img src="" alt="">
</div>
<div class="top">
<img src="" alt="">
</div>
</div>
<input type="file" id="hidden-button" style="display: none;" accept="image/*">
<script src="script.js"></script>
<script src="compressor.js"></script>
</body>
</html>
\ No newline at end of file
oli-woodman.jpg 0 → 100644
View file @ ce0fd433
oli-woodman.jpg

5.14 MB

script.js 0 → 100644
View file @ ce0fd433
var upload = document.querySelector('.upload')
var download = document.querySelector('.download')
var hiddenButton = document.querySelector('#hidden-button')
var input = document.querySelector('#slider-input')
var inputValue = document.querySelector('.input-value')
var inputMetedata = document.getElementsByClassName('metadata')[0]
var outputMetedata = document.getElementsByClassName('metadata')[1]
input.oninput = function(){
var c = document.getElementsByClassName('top')[0]
c.style.width = (600/100)*input.value + 'px'
}
upload.onclick = function(){
// click on input type file
hiddenButton.click();
}
hiddenButton.onchange = () => {
// get selected file
var file = hiddenButton.files[0];
var url = URL.createObjectURL(file);
var img = document.createElement('img');
// load image to get width height
img.src = url;
img.onload = function(){
var w = img.width;
var h = img.height;
// give metedata of input file
inputMetedata.getElementsByTagName('li')[0].getElementsByTagName('span')[0].innerHTML = file.name;
inputMetedata.getElementsByTagName('li')[1].getElementsByTagName('span')[0].innerHTML = w + '/' + h;
inputMetedata.getElementsByTagName('li')[2].getElementsByTagName('span')[0].innerHTML = ((file.size/1024)/1024).toFixed(2) + 'Mb';
// set attribute for file name used in downloading
upload.setAttribute('filename', file.name);
// create a function to get ratio of width height
calculateValues(inputValue.value, w, h);
inputValue.onchange = function(){
// run function again on changing compressed ratio
calculateValues(inputValue.value, w, h);
}
// set original image on preview
document.querySelector('.bottom img').src = url;
}
}
// now create calculateValues function here
function calculateValues(v, w, h){
var outputQuality = ((100-v) / 100);
var outputWidth = w * outputQuality;
var outputHeight = h * outputQuality;
// now craete a function to compress
Compress(outputQuality, outputWidth, outputHeight);
}
function Compress(q, w, h){
new Compressor(hiddenButton.files[0], {
quality: q,
width: w,
height: h,
success(result){
var url = URL.createObjectURL(result);
document.getElementsByClassName('output')[0].style.display = 'block';
document.getElementsByClassName('progress')[0].style.display = 'block';
document.getElementsByClassName('preview-container')[0].style.display = 'block';
var img = document.createElement('img');
img.src = url;
img.onload = function(){
// show compressed image on preview
document.querySelector('.top img').src = url;
var w = img.width;
var h = img.height;
// give metedata of output file
outputMetedata.getElementsByTagName('li')[0].getElementsByTagName('span')[0].innerHTML = ((((q*100)-99))+((q*100)/100)*10).toFixed(0) + '%';
outputMetedata.getElementsByTagName('li')[1].getElementsByTagName('span')[0].innerHTML = w + '/' + h;
outputMetedata.getElementsByTagName('li')[2].getElementsByTagName('span')[0].innerHTML = (result.size/1024).toFixed(0) + 'Kb';
}
download.onclick = function(){
var filename = upload.getAttribute('filename').split('.');
var a = document.createElement('a');
a.href = url;
a.download = filename[0] + '-min.' + filename[1];
a.click();
}
},
error(err){
console.log(err.message);
}
})
}
\ No newline at end of file
style.css 0 → 100644
View file @ ce0fd433
/* optional */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
body{
font-family: 'Noto Sans', sans-serif;
padding: 0px 240px;
background-color: #6165F8;
height: 1200px;
}
.container{
background-color: #ffffff17;
border-radius: 12px;
padding: 40px 30px;
color: white;
margin-top: 40px;
}
.upload,
.download{
border: 0px;
padding: 10px 30px;
font-family: 'Noto Sans', sans-serif;
color: #6165F8;
font-weight: 700;
border-radius: 4px;
width: 125px;
cursor: pointer;
outline: none;
}
.download{
margin-top: 40px;
margin-bottom: 0px;
}
.upload:active,
.download:active{
cursor: unset;
}
.metadata{
display: inline;
margin-left: 5px;
}
.metadata li{
display: inline-block;
font-weight: 700;
width: 200px;
}
.metadata li span{
position: relative;
top: 5px;
display: inline-block;
font-weight: 400;
width: 90px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.input-value{
width: calc(100% + 14px);
-webkit-appearance: none;
border: none;
outline: none;
background-color: #6165F8;
margin-left: -7px;
}
.input-value::-webkit-slider-runnable-track{
height: 6px;
}
.track{
height: 6px;
width: 100%;
background-color: #6F73F9;
position: relative;
top: 18px;
z-index: 1;
}
.input-value::-webkit-slider-thumb{
-webkit-appearance: none;
border-radius: 100%;
background-color: #6165F8;
border: 2px solid white;
height: 22px;
width: 22px;
margin-top: -7px;
position: relative;
z-index: 2;
}
.preview-container{
width: calc(100% - 253px);
position: relative;
margin: 0px 116px;
margin-top: 60px;
font-weight: 700;
}
#slider-input{
width: calc(100% + 40px);
position: absolute;
left: -21px;
top: -6px;
-webkit-appearance: none;
outline: none;
}
#slider-input::-webkit-slider-runnable-track{
height: 0px;
}
#slider-input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #6165F8;
}
.compressed,
.original{
position: absolute;
top: -25px;
margin-left: 10px;
color: white;
}
.original{
right: 10px;
}
.top{
display: flex;
align-items: stretch;
overflow: hidden;
width: 300px;
border-right: 2px solid white;
}
.top img{
min-width: 600px;
}
.bottom{
width: 100%;
height: 100%;
}
.bottom img{
width: 100%;
position: absolute;
z-index: -1;
}
.output,
.progress,
.preview-container{
display: none;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment