Programing in back ground remove image tools
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Removal Tool</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.tool-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.upload-section {
border: 2px dashed #3498db;
padding: 30px;
text-align: center;
border-radius: 8px;
background-color: #f8fafc;
cursor: pointer;
transition: all 0.3s;
}
.upload-section:hover {
background-color: #e8f4fc;
border-color: #2980b9;
}
.upload-icon {
font-size: 48px;
color: #3498db;
margin-bottom: 15px;
}
.file-input {
display: none;
}
.preview-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.image-container {
position: relative;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.image-container h3 {
background-color: #2c3e50;
color: white;
margin: 0;
padding: 10px;
text-align: center;
font-size: 16px;
}
.image-preview {
max-width: 400px;
max-height: 400px;
display: block;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.remove-btn {
background-color: #3498db;
color: white;
}
.remove-btn:hover {
background-color: #2980b9;
}
.download-btn {
background-color: #2ecc71;
color: white;
}
.download-btn:hover {
background-color: #27ae60;
}
.reset-btn {
background-color: #e74c3c;
color: white;
}
.reset-btn:hover {
background-color: #c0392b;
}
.loading {
display: none;
text-align: center;
margin: 20px 0;
}
.spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.settings {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
}
.settings h3 {
margin-top: 0;
color: #2c3e50;
}
.setting-option {
margin: 10px 0;
}
label {
margin-left: 5px;
}
.error {
color: #e74c3c;
text-align: center;
margin: 10px 0;
}
@media (max-width: 768px) {
.preview-section {
flex-direction: column;
align-items: center;
}
.container {
padding: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Background Removal Tool</h1>
<div class="tool-container">
<div class="upload-section" id="uploadArea">
<div class="upload-icon">📁</div>
<h2>Upload an Image</h2>
<p>Drag & drop your image here or click to browse</p>
<p class="small">Supports JPG, PNG, WEBP (Max 5MB)</p>
<input type="file" id="fileInput" class="file-input" accept="image/*">
</div>
<div class="loading" id="loadingIndicator">
<div class="spinner"></div>
<p>Processing your image...</p>
</div>
<div class="error" id="errorMessage"></div>
<div class="preview-section" id="previewSection" style="display: none;">
<div class="image-container">
<h3>Original Image</h3>
<img id="originalPreview" class="image-preview" src="" alt="Original image">
</div>
<div class="image-container">
<h3>Result</h3>
<img id="resultPreview" class="image-preview" src="" alt="Result image">
</div>
</div>
<div class="controls" id="actionButtons" style="display: none;">
<button class="remove-btn" id="removeBgBtn">Remove Background</button>
<button class="download-btn" id="downloadBtn">Download Result</button>
<button class="reset-btn" id="resetBtn">Reset</button>
</div>
<div class="settings" id="settingsPanel" style="display: none;">
<h3>Settings</h3>
<div class="setting-option">
<input type="checkbox" id="transparentBg" checked>
<label for="transparentBg">Transparent Background</label>
</div>
<div class="setting-option">
<input type="checkbox" id="smoothEdges" checked>
<label for="smoothEdges">Smooth Edges</label>
</div>
<div class="setting-option">
<label for="bgColor">Background Color:</label>
<input type="color" id="bgColor" value="#ffffff">
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const fileInput = document.getElementById('fileInput');
const uploadArea = document.getElementById('uploadArea');
const previewSection = document.getElementById('previewSection');
const actionButtons = document.getElementById('actionButtons');
const loadingIndicator = document.getElementById('loadingIndicator');
const errorMessage = document.getElementById('errorMessage');
const originalPreview = document.getElementById('originalPreview');
const resultPreview = document.getElementById('resultPreview');
const removeBgBtn = document.getElementById('removeBgBtn');
const downloadBtn = document.getElementById('downloadBtn');
const resetBtn = document.getElementById('resetBtn');
const settingsPanel = document.getElementById('settingsPanel');
let uploadedImage = null;
// Handle drag and drop
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.style.backgroundColor = '#e8f4fc';
uploadArea.style.borderColor = '#2980b9';
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.style.backgroundColor = '#f8fafc';
uploadArea.style.borderColor = '#3498db';
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.style.backgroundColor = '#f8fafc';
uploadArea.style.borderColor = '#3498db';
if (e.dataTransfer.files.length) {
fileInput.files = e.dataTransfer.files;
handleFileUpload(e.dataTransfer.files[0]);
}
});
// Handle click to browse
uploadArea.addEventListener('click', () => {
fileInput.click();
});
// Handle file selection
fileInput.addEventListener('change', () => {
if (fileInput.files.length) {
handleFileUpload(fileInput.files[0]);
}
});
// Process remove background button
removeBgBtn.addEventListener('click', () => {
if (!uploadedImage) return;
loadingIndicator.style.display = 'block';
errorMessage.textContent = '';
// In a real implementation, this would call an actual background removal API
// For this demo, we'll simulate it with a timeout
setTimeout(() => {
simulateBackgroundRemoval();
loadingIndicator.style.display = 'none';
}, 1500);
});
// Download button
downloadBtn.addEventListener('click', () => {
if (!resultPreview.src) return;
const link = document.createElement('a');
link.href = resultPreview.src;
link.download = 'background-removed.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Reset button
resetBtn.addEventListener('click', resetTool);
function handleFileUpload(file) {
// Validate file
if (!file.type.match('image.*')) {
showError('Please upload an image file (JPG, PNG, WEBP)');
return;
}
if (file.size > 5 * 1024 * 1024) { // 5MB
showError('File size should be less than 5MB');
return;
}
errorMessage.textContent = '';
const reader = new FileReader();
reader.onload = function(e) {
uploadedImage = e.target.result;
originalPreview.src = uploadedImage;
// Show preview and controls
previewSection.style.display = 'flex';
actionButtons.style.display = 'flex';
settingsPanel.style.display = 'block';
};
reader.readAsDataURL(file);
}
function simulateBackgroundRemoval() {
// In a real implementation, this would use an API like Remove.bg
// For this demo, we'll just apply a simple effect to simulate it
// Create a canvas to "process" the image
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Get image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Very simple "background removal" simulation
// (This is just for demo - real implementation would be much more sophisticated)
for (let i = 0; i < data.length; i += 4) {
// Simple green screen effect for demo
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// If the pixel is somewhat light, make it transparent
if (r + g + b > 500 || g > r + b) {
data[i + 3] = 0; // Set alpha to 0
}
}
ctx.putImageData(imageData, 0, 0);
// Set the result preview
resultPreview.src = canvas.toDataURL();
};
img.src = uploadedImage;
}
function showError(message) {
errorMessage.textContent = message;
resetTool();
}
function resetTool() {
fileInput.value = '';
uploadedImage = null;
originalPreview.src = '';
resultPreview.src = '';
previewSection.style.display = 'none';
actionButtons.style.display = 'none';
settingsPanel.style.display = 'none';
loadingIndicator.style.display = 'none';
errorMessage.textContent = '';
}
});
</script>
</body>
</html>
Comments
Post a Comment