AI Image Enhancer - Free Online Photo Quality Tool
[Your Ad Code Here]
AI Image Enhancer
[Your Ad Code Here]
Free Online Image Quality Enhancement Guide
Transform Your Photos Instantly
Our AI-powered tool helps you enhance images in seconds. Perfect for:
- Social media content creation
- E-commerce product photos
- Professional photography editing
- Restoring old pictures
How It Works
1
Upload
Select any JPG/PNG image from your device
2
Enhance
Use AI enhancement or manual adjustments
3
Download
Get HD-quality results instantly
[Your Ad Code Here]
CSS Code
:root {
--primary-color: #00ff9d;
--background-color: #1a1a1a;
--text-color: #ffffff;
--control-bg: #2d2d2d;
--border-color: #444;
}
[data-theme="light"] {
--background-color: #f5f5f5;
--text-color: #1a1a1a;
--control-bg: #ffffff;
--border-color: #ddd;
--primary-color: #007bff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 0.3s all;
}
body {
background: var(--background-color);
color: var(--text-color);
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
h1 {
text-align: center;
margin: 2rem 0;
color: var(--primary-color);
font-size: 2.5rem;
}
.upload-section {
display: flex;
gap: 1rem;
margin: 2rem 0;
justify-content: center;
flex-wrap: wrap;
}
button {
padding: 1rem 2rem;
background: var(--primary-color);
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
color: var(--background-color);
display: flex;
align-items: center;
gap: 0.5rem;
}
.comparison-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 2rem auto;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 255, 157, 0.2);
}
.image-container {
position: relative;
width: 100%;
height: 60vh;
min-height: 400px;
}
#originalImage,
#enhancedImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.slider {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: var(--primary-color);
cursor: col-resize;
z-index: 10;
}
.controls {
background: var(--control-bg);
padding: 2rem;
border-radius: 15px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.seo-content {
background: var(--control-bg);
padding: 2rem;
border-radius: 15px;
margin: 3rem 0;
}
.seo-content h2 {
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 1rem;
margin-bottom: 2rem;
}
.ad-container {
background: var(--control-bg);
padding: 1.5rem;
border-radius: 10px;
margin: 2rem 0;
text-align: center;
border: 1px solid var(--border-color);
}
.sticky-ad {
position: sticky;
bottom: 20px;
background: var(--primary-color);
color: var(--background-color);
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.image-container {
height: 50vh;
}
}
Javascript Code
document.addEventListener('DOMContentLoaded', () => {
// Theme Toggle
const themeBtn = document.getElementById('themeBtn');
const body = document.body;
function toggleTheme() {
const currentTheme = body.getAttribute('data-theme') || 'dark';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
body.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}
const savedTheme = localStorage.getItem('theme');
if (savedTheme) body.setAttribute('data-theme', savedTheme);
themeBtn.addEventListener('click', toggleTheme);
// Image Processor
const elements = {
imageInput: document.getElementById('imageInput'),
uploadBtn: document.getElementById('uploadBtn'),
downloadBtn: document.getElementById('downloadBtn'),
autoEnhanceBtn: document.getElementById('autoEnhanceBtn'),
originalImage: document.getElementById('originalImage'),
enhancedImage: document.getElementById('enhancedImage'),
brightness: document.getElementById('brightness'),
contrast: document.getElementById('contrast'),
saturation: document.getElementById('saturation'),
sharpness: document.getElementById('sharpness'),
resetBtn: document.getElementById('resetBtn'),
slider: document.querySelector('.slider'),
rotateLeftBtn: document.getElementById('rotateLeftBtn'),
rotateRightBtn: document.getElementById('rotateRightBtn'),
formatSelect: document.getElementById('formatSelect')
};
let state = {
currentImage: null,
enhancedCanvas: null,
isDragging: false,
rotationAngle: 0
};
// Event Listeners
elements.uploadBtn.addEventListener('click', () => elements.imageInput.click());
elements.imageInput.addEventListener('change', handleImageUpload);
elements.slider.addEventListener('mousedown', startDragging);
document.addEventListener('mousemove', handleDragging);
document.addEventListener('mouseup', stopDragging);
elements.resetBtn.addEventListener('click', resetControls);
elements.autoEnhanceBtn.addEventListener('click', autoEnhance);
elements.rotateLeftBtn.addEventListener('click', () => rotateImage(-90));
elements.rotateRightBtn.addEventListener('click', () => rotateImage(90));
elements.downloadBtn.addEventListener('click', downloadImage);
[elements.brightness, elements.contrast, elements.saturation, elements.sharpness]
.forEach(control => control.addEventListener('input', updateImage));
function handleImageUpload(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
elements.originalImage.onload = () => {
initializeImageProcessing(event.target.result);
};
elements.originalImage.src = event.target.result;
elements.enhancedImage.src = event.target.result;
};
reader.readAsDataURL(file);
}
function initializeImageProcessing(imageSrc) {
state.enhancedCanvas = new fabric.Canvas(null, {
width: elements.originalImage.naturalWidth,
height: elements.originalImage.naturalHeight
});
fabric.Image.fromURL(imageSrc, (img) => {
state.currentImage = img;
state.enhancedCanvas.add(state.currentImage);
updateImage();
});
}
function updateImage() {
if (!state.currentImage) return;
const filters = [
new fabric.Image.filters.Brightness({
brightness: elements.brightness.value / 100
}),
new fabric.Image.filters.Contrast({
contrast: elements.contrast.value / 100
}),
new fabric.Image.filters.Saturation({
saturation: elements.saturation.value
}),
new fabric.Image.filters.Convolute({
matrix: [0, -1, 0, -1, 5, -1, 0, -1, 0],
opacity: elements.sharpness.value / 100
})
];
state.currentImage.filters = filters;
state.currentImage.applyFilters();
state.enhancedCanvas.renderAll();
elements.enhancedImage.src = state.enhancedCanvas.toDataURL();
}
function autoEnhance() {
elements.brightness.value = 15;
elements.contrast.value = 20;
elements.saturation.value = 25;
elements.sharpness.value = 30;
updateImage();
}
function rotateImage(degrees) {
state.rotationAngle += degrees;
state.currentImage.angle = state.rotationAngle;
state.enhancedCanvas.renderAll();
elements.enhancedImage.src = state.enhancedCanvas.toDataURL();
}
function downloadImage() {
if (!state.enhancedCanvas) return;
const tempCanvas = document.createElement('canvas');
const ctx = tempCanvas.getContext('2d');
const scaleFactor = 2;
tempCanvas.width = state.enhancedCanvas.width * scaleFactor;
tempCanvas.height = state.enhancedCanvas.height * scaleFactor;
ctx.scale(scaleFactor, scaleFactor);
ctx.drawImage(state.enhancedCanvas.getElement(), 0, 0);
const link = document.createElement('a');
link.download = `enhanced-image.${elements.formatSelect.value}`;
link.href = tempCanvas.toDataURL(`image/${elements.formatSelect.value}`, 1.0);
link.click();
}
function resetControls() {
elements.brightness.value = 0;
elements.contrast.value = 0;
elements.saturation.value = 0;
elements.sharpness.value = 0;
state.rotationAngle = 0;
updateImage();
}
function startDragging(e) {
state.isDragging = true;
document.body.style.cursor = 'col-resize';
}
function handleDragging(e) {
if (!state.isDragging) return;
const rect = el
