Online Photo Editor
Tools
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f2f2f2;
padding: 16px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 64px);
}
.image-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
max-width: 100%;
max-height: 100%;
}
.tools-container {
flex: 0 0 200px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin: 0;
}
h2 {
margin-top: 0;
}
button {
margin-top: 8px;
padding: 8px;
width: 100%;
}
#image-input {
display: none;
}
// script.js
document.getElementById('image-input').addEventListener('change', function (event) {
var image = document.getElementById('image-preview');
image.src = URL.createObjectURL(event.target.files[0]);
});
document.getElementById('rotate-left').addEventListener('click', function () {
var image = document.getElementById('image-preview');
var transform = image.style.transform || '';
image.style.transform = transform + 'rotate(-90deg)';
});
document.getElementById('rotate-right').addEventListener('click', function () {
var image = document.getElementById('image-preview');
var transform = image.style.transform || '';
image.style.transform = transform + 'rotate(90deg)';
});
document.getElementById('flip-horizontal').addEventListener('click', function () {
var image = document.getElementById('image-preview');
var transform = image.style.transform || '';
image.style.transform = transform + 'scaleX(-1)';
});
document.getElementById('flip-vertical').addEventListener('click', function () {
var image = document.getElementById('image-preview');
var transform = image.style.transform || '';
image.style.transform = transform + 'scaleY(-1)';
0
