Html Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Image Enhancer - Free Online Photo Quality Tool</title>
<meta name="description" content="Enhance image quality instantly with AI-powered editing. Improve brightness, contrast, sharpness with real-time preview. Perfect for social media and professional use.">
<!-- Google Analytics (Replace GA-XXXXXX with your ID) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA-XXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA-XXXXXX');
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="theme-toggle">
<button id="themeBtn">🌓 Toggle Theme</button>
</div>
<div class="container">
<!-- Top Ad -->
<div class="ad-container">
[Your Ad Code Here]
</div>
<h1>AI Image Enhancer</h1>
<div class="upload-section">
<input type="file" id="imageInput" accept="image/*" hidden>
<button id="uploadBtn">📤 Upload Image</button>
<button id="autoEnhanceBtn">🤖 Auto Enhance</button>
<button id="downloadBtn">⏬ Download</button>
</div>
<div class="comparison-container">
<div class="image-container">
<img src="" alt="Original" id="originalImage">
<img src="" alt="Enhanced" id="enhancedImage">
<div class="slider"></div>
</div>
</div>
<div class="controls">
<div class="control-group">
<button id="rotateLeftBtn">↺ Rotate Left</button>
<button id="rotateRightBtn">↻ Rotate Right</button>
</div>
<div class="control-group">
<label>🔆 Brightness</label>
<input type="range" id="brightness" min="-100" max="100" value="0">
</div>
<div class="control-group">
<label>🌈 Contrast</label>
<input type="range" id="contrast" min="-100" max="100" value="0">
</div>
<div class="control-group">
<label>🎨 Saturation</label>
<input type="range" id="saturation" min="-100" max="100" value="0">
</div>
<div class="control-group">
<label>🔍 Sharpness</label>
<input type="range" id="sharpness" min="0" max="100" value="0">
</div>
<div class="control-group">
<label>📁 Format</label>
<select id="formatSelect">
<option value="png">PNG</option>
<option value="jpeg">JPEG</option>
</select>
</div>
<button id="resetBtn">🔄 Reset All</button>
</div>
<!-- Middle Ad -->
<div class="ad-container">
[Your Ad Code Here]
</div>
<!-- SEO Article -->
<article class="seo-content">
<h2>Free Online Image Quality Enhancement Guide</h2>
<section>
<h3>Transform Your Photos Instantly</h3>
<p>Our AI-powered tool helps you enhance images in seconds. Perfect for:</p>
<ul>
<li>Social media content creation</li>
<li>E-commerce product photos</li>
<li>Professional photography editing</li>
<li>Restoring old pictures</li>
</ul>
</section>
<section>
<h3>How It Works</h3>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h4>Upload</h4>
<p>Select any JPG/PNG image from your device</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h4>Enhance</h4>
<p>Use AI enhancement or manual adjustments</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h4>Download</h4>
<p>Get HD-quality results instantly</p>
</div>
</div>
</section>
<!-- More article sections... -->
</article>
<!-- Bottom Ad -->
<div class="ad-container sticky-ad">
[Your Ad Code Here]
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<script src="script.js"></script>
</body>
</html>
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 = elements.enhancedImage.getBoundingClientRect();
const x = e.clientX - rect.left;
const percentage = (x / rect.width) * 100;
const pos = Math.max(0, Math.min(100, percentage));
elements.enhancedImage.style.clipPath = `inset(0 ${100 - pos}% 0 0)`;
elements.slider.style.left = `${pos}%`;
}
function stopDragging() {
state.isDragging = false;
document.body.style.cursor = 'default';
}
});
