Html Code for Premium Camera. Copy this code and use it on your website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Camera Filters</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #2d3436;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.upload-section {
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.image-preview {
width: 300px;
height: 300px;
border: 3px dashed #dfe6e9;
border-radius: 15px;
margin: 20px auto;
overflow: hidden;
position: relative;
background: #f9f9f9;
}
#previewImage {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.filter-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
.btn {
padding: 12px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
color: white;
display: flex;
align-items: center;
gap: 8px;
min-width: 160px;
justify-content: center;
}
.btn-beauty {
background: #ff6b6b;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}
.btn-iphone {
background: #5f27cd;
box-shadow: 0 4px 15px rgba(95, 39, 205, 0.3);
}
.btn-sony {
background: #2e86de;
box-shadow: 0 4px 15px rgba(46, 134, 222, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.btn-download {
background: #10ac84;
box-shadow: 0 4px 15px rgba(16, 172, 132, 0.3);
display: none;
margin: 20px auto 0;
}
.custom-file-upload {
display: inline-block;
padding: 12px 30px;
background: #576574;
color: white;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(87, 101, 116, 0.3);
display: flex;
align-items: center;
gap: 8px;
margin: 0 auto;
}
.custom-file-upload:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(87, 101, 116, 0.4);
}
#fileInput {
display: none;
}
.loading {
display: none;
color: #2d3436;
font-size: 18px;
margin-top: 20px;
}
.icon {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>📷 Premium Camera Filters</h1>
<div class="upload-section">
<label class="custom-file-upload">
<i class="fas fa-cloud-upload-alt icon"></i>
<input type="file" id="fileInput" accept="image/*">
Upload Image
</label>
<div class="image-preview">
<img id="previewImage" alt="Preview">
</div>
<div class="filter-buttons">
<button class="btn btn-beauty" onclick="applyFilter('beauty')">
<i class="fas fa-spa icon"></i> Beauty Plus
</button>
<button class="btn btn-iphone" onclick="applyFilter('iphone')">
<i class="fab fa-apple icon"></i> iPhone
</button>
<button class="btn btn-sony" onclick="applyFilter('sony')">
<i class="fas fa-camera icon"></i> Sony
</button>
</div>
<button class="btn btn-download" id="downloadBtn" onclick="downloadImage()">
<i class="fas fa-download icon"></i> Download Image
</button>
<div class="loading" id="loading">Applying magic... <i class="fas fa-magic"></i></div>
</div>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const previewImage = document.getElementById('previewImage');
const downloadBtn = document.getElementById('downloadBtn');
const loading = document.getElementById('loading');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
previewImage.style.display = 'block';
previewImage.src = e.target.result;
previewImage.style.filter = 'none';
downloadBtn.style.display = 'none';
}
reader.readAsDataURL(file);
}
});
function applyFilter(filterType) {
if (!previewImage.src || previewImage.src.includes('data:,')) {
alert('Please upload an image first!');
return;
}
loading.style.display = 'block';
// Create temporary canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = previewImage.src;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Apply selected filter
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
switch(filterType) {
case 'beauty':
// Beauty Plus filter (smoothing + glow effect)
for (let i = 0; i < data.length; i += 4) {
// Skin smoothing
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = data[i] * 0.7 + avg * 0.3; // Red
data[i + 1] = data[i + 1] * 0.7 + avg * 0.3; // Green
data[i + 2] = data[i + 2] * 0.7 + avg * 0.3; // Blue
// Brighten
data[i] = Math.min(255, data[i] * 1.1);
data[i + 1] = Math.min(255, data[i + 1] * 1.1);
data[i + 2] = Math.min(255, data[i + 2] * 1.1);
}
previewImage.style.filter = 'contrast(105%) saturate(110%) brightness(105%)';
break;
case 'iphone':
// iPhone filter (vibrant colors + sharpness)
for (let i = 0; i < data.length; i += 4) {
// Increase contrast
data[i] = 128 + (data[i] - 128) * 1.2; // Red
data[i + 1] = 128 + (data[i + 1] - 128) * 1.1; // Green
data[i + 2] = 128 + (data[i + 2] - 128) * 0.9; // Blue
// Boost blues and greens slightly
data[i + 1] = Math.min(255, data[i + 1] * 1.05);
data[i + 2] = Math.min(255, data[i + 2] * 1.08);
}
previewImage.style.filter = 'contrast(115%) saturate(120%)';
break;
case 'sony':
// Sony filter (rich colors + cinematic look)
for (let i = 0; i < data.length; i += 4) {
// Increase reds and blues
data[i] = Math.min(255, data[i] * 1.15); // Red
data[i + 2] = Math.min(255, data[i + 2] * 1.1); // Blue
// Darken greens slightly
data[i + 1] = data[i + 1] * 0.95;
// Add slight vignette effect
const x = (i / 4) % canvas.width;
const y = Math.floor((i / 4) / canvas.width);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
const maxDistance = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
const vignette = 1 - (distance / maxDistance) * 0.3;
data[i] *= vignette;
data[i + 1] *= vignette;
data[i + 2] *= vignette;
}
previewImage.style.filter = 'contrast(120%) saturate(130%) brightness(98%)';
break;
}
ctx.putImageData(imageData, 0, 0);
previewImage.src = canvas.toDataURL();
loading.style.display = 'none';
downloadBtn.style.display = 'block';
};
}
function downloadImage() {
const link = document.createElement('a');
link.download = 'premium-filter-photo.png';
link.href = previewImage.src;
link.click();
}
</script>
</body>
</html>
Comments
Post a Comment