299 lines
8.2 KiB
HTML
299 lines
8.2 KiB
HTML
<!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>Resize Image</title>
|
|
<style>
|
|
* {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
html {
|
|
background-image: linear-gradient(
|
|
-45deg,
|
|
rgba(204, 83, 51, 1) 0%,
|
|
rgba(91, 27, 186, 1) 100%
|
|
);
|
|
background-size: 400% 400%;
|
|
animation: gradient 10s ease infinite;
|
|
}
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
.input-file {
|
|
display: none;
|
|
}
|
|
.btn-browse {
|
|
height: 300px;
|
|
width: 300px;
|
|
border-radius: 10px;
|
|
border: 1.5px solid rgb(255, 103, 1);
|
|
background-color: rgba(255, 153, 0, 0.5);
|
|
display: grid;
|
|
place-content: center;
|
|
cursor: pointer;
|
|
color: white;
|
|
margin-bottom: 15px;
|
|
padding: 10px 0;
|
|
outline: none;
|
|
}
|
|
.btn-submit {
|
|
height: 50px;
|
|
width: 300px;
|
|
border-radius: 10px;
|
|
border: 1.5px solid red;
|
|
background-color: rgb(207, 69, 34);
|
|
color: white;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
outline: none;
|
|
}
|
|
.note {
|
|
font-size: 18px;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.input-option {
|
|
width: 220px;
|
|
border: 1px solid rgb(207, 69, 34);
|
|
border-radius: 10px;
|
|
height: 30px;
|
|
padding: 3px 10px;
|
|
outline: none;
|
|
}
|
|
.input-option-quality {
|
|
width: 200px;
|
|
}
|
|
.value-qty-img {
|
|
width: 30px;
|
|
text-align: right;
|
|
color: white;
|
|
}
|
|
.label-option {
|
|
width: 70px;
|
|
color: white;
|
|
}
|
|
.label-option-checkbox {
|
|
width: 100px;
|
|
color: white;
|
|
}
|
|
.input-wrapper {
|
|
width: 300px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.form-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.checkbox-option {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.checkbox-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="form-submit" class="container">
|
|
<div id="btn-browse" class="btn-browse">Browse Image</div>
|
|
<input
|
|
id="input-file"
|
|
class="input-file"
|
|
type="file"
|
|
name="image"
|
|
id=""
|
|
required
|
|
accept="image/*"
|
|
/>
|
|
|
|
<div class="form-options">
|
|
<div class="input-wrapper">
|
|
<label for="quality-input" class="label-option">Quality</label>
|
|
<input
|
|
id="quality-input"
|
|
class="input-option-quality"
|
|
type="range"
|
|
max="100"
|
|
min="1"
|
|
/>
|
|
<span id="value-quality" class="value-qty-img"></span>
|
|
</div>
|
|
<div class="checkbox-wrapper">
|
|
<label for="use-dimension-input" class="label-option-checkbox"
|
|
>Original Size</label
|
|
>
|
|
<input
|
|
id="original-size-input"
|
|
type="checkbox"
|
|
class="checkbox-option"
|
|
/>
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<label for="width-input" class="label-option">Width</label>
|
|
<input
|
|
id="width-input"
|
|
class="input-option"
|
|
type="number"
|
|
max="5000"
|
|
min="10"
|
|
placeholder="Input width"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-wrapper">
|
|
<label for="height-input" class="label-option">Height</label>
|
|
<input
|
|
id="height-input"
|
|
class="input-option"
|
|
type="number"
|
|
max="5000"
|
|
min="10"
|
|
placeholder="Input height"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-submit" class="btn-submit" type="submit">
|
|
Submit & Download
|
|
</button>
|
|
</form>
|
|
|
|
<a
|
|
id="anchor-donwload"
|
|
href=""
|
|
download
|
|
className="hidden"
|
|
rel="nopoper noopener"
|
|
target="_blank"
|
|
></a>
|
|
</body>
|
|
<script>
|
|
const formSubmit = document.getElementById('form-submit');
|
|
const btnBrowse = document.getElementById('btn-browse');
|
|
const btnSubmit = document.getElementById('btn-submit');
|
|
const inputFile = document.getElementById('input-file');
|
|
const anchorDonwload = document.getElementById('anchor-donwload');
|
|
const inputQuality = document.getElementById('quality-input');
|
|
const valueQuality = document.getElementById('value-quality');
|
|
const inputWidth = document.getElementById('width-input');
|
|
const inputHeight = document.getElementById('height-input');
|
|
const checkboxOriSize = document.getElementById('original-size-input');
|
|
|
|
const setInitialState = (() => {
|
|
if (checkboxOriSize.checked) {
|
|
inputHeight.setAttribute('disabled', true);
|
|
inputWidth.setAttribute('disabled', true);
|
|
} else {
|
|
inputHeight.removeAttribute('disabled');
|
|
inputWidth.removeAttribute('disabled');
|
|
}
|
|
valueQuality.innerHTML = inputQuality.value;
|
|
btnSubmit.setAttribute('disabled', true);
|
|
})();
|
|
|
|
btnBrowse.addEventListener('click', (e) => {
|
|
inputFile.click();
|
|
});
|
|
|
|
inputFile.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
|
|
const imageFile = new Image();
|
|
imageFile.onload = function () {
|
|
// URL.revokeObjectURL(image.src);
|
|
btnBrowse.style.backgroundImage = `url(${URL.createObjectURL(file)})`;
|
|
btnBrowse.style.backgroundSize = 'cover';
|
|
btnBrowse.style.backgroundColor = 'transparent';
|
|
btnBrowse.style.width = `70vw`;
|
|
btnBrowse.style.height = `calc(${
|
|
imageFile.height / imageFile.width
|
|
}*70vw)`;
|
|
btnBrowse.style.placeContent = 'flex-end center';
|
|
btnBrowse.innerHTML = 'Change Image';
|
|
};
|
|
imageFile.src = URL.createObjectURL(file);
|
|
|
|
btnSubmit.removeAttribute('disabled');
|
|
});
|
|
|
|
inputQuality.addEventListener('change', (e) => {
|
|
const qualityValue = e.target.value;
|
|
valueQuality.innerHTML = qualityValue;
|
|
});
|
|
|
|
checkboxOriSize.addEventListener('change', (e) => {
|
|
const isChecked = e.target.checked;
|
|
if (isChecked) {
|
|
inputHeight.setAttribute('disabled', true);
|
|
inputWidth.setAttribute('disabled', true);
|
|
} else if (!isChecked) {
|
|
inputHeight.removeAttribute('disabled');
|
|
inputWidth.removeAttribute('disabled');
|
|
}
|
|
});
|
|
|
|
formSubmit.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
|
|
const heightValue = inputHeight.value;
|
|
const widthValue = inputWidth.value;
|
|
const isOriginalSize = checkboxOriSize.checked;
|
|
const qualityValue = inputQuality.value;
|
|
const imageFile = inputFile.files[0];
|
|
|
|
const formData = new FormData();
|
|
formData.append('image', imageFile);
|
|
|
|
btnSubmit.innerHTML = 'Loading...';
|
|
btnSubmit.setAttribute('disabled', true);
|
|
|
|
fetch('https://img-resize-xxx.herokuapp.com/', {
|
|
method: 'POST',
|
|
headers: {},
|
|
body: formData,
|
|
})
|
|
.then((res) => res.json())
|
|
.then((result) => {
|
|
const params = isOriginalSize
|
|
? `?quality=${qualityValue}`
|
|
: `?quality=${qualityValue}&width=${widthValue}&height=${heightValue}`;
|
|
anchorDonwload.setAttribute('href', result.urlImage + params);
|
|
anchorDonwload.click();
|
|
btnSubmit.innerHTM = 'Submit & Download';
|
|
btnSubmit.removeAttribute('disabled');
|
|
})
|
|
.catch((err) => {
|
|
btnSubmit.innerHTM = 'Submit & Download';
|
|
btnSubmit.removeAttribute('disabled');
|
|
});
|
|
});
|
|
</script>
|
|
</html>
|