Spaces:

Ashrafb
/

Bcrb1

Paused

App Files Files Community

Bcrb1 / static /static_index.html

Ashrafb

Rename static/static_index (28).html to static/static_index.html

3a2ad82 verified about 2 years ago

raw

history blame contribute delete

5.56 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image Background Remover</title>
	<style>
	/* Style to make the image smaller */
	#outputImageContainer img {
	max-width: 100%;
	height: auto;
	}
	</style>
	</head>
	<body>
	<h1>Part 1: Remove Background</h1>
	<form id="uploadForm" enctype="multipart/form-data">
	<input type="file" name="file" id="fileInput" accept="image/*">
	<button type="button" onclick="uploadImage()">Upload Image</button>
	</form>
	<div id="outputImageContainer">
	<img id="outputImage" alt="Processed Image" style="display: none;">
	</div>

	<hr>

	<h1>Part 2: Apply Background</h1>
	<select id="backgroundOptions" onchange="toggleBackgroundOption()">
	<option value="transparent">Transparent Background</option>
	<option value="color">Color Background</option>
	<option value="custom">Custom Background</option>
	</select>
	<input type="file" id="customBackgroundInput" accept="image/*" style="display: none;">
	<input type="color" id="colorPicker" style="display: none;">
	<button type="button" onclick="applyBackground()">Apply Background</button>

	<script>
	let processedImageDataUrl = '';
	let originalImageDataUrl = '';

	function uploadImage() {
	const formData = new FormData();
	const fileInput = document.getElementById('fileInput');
	formData.append('file', fileInput.files[0]);

	fetch('/data', {
	method: 'POST',
	body: formData
	})
	.then(response => response.blob())
	.then(blob => {
	originalImageDataUrl = URL.createObjectURL(blob);
	document.getElementById('outputImage').src = originalImageDataUrl;
	document.getElementById('outputImage').style.display = 'inline';
	processedImageDataUrl = originalImageDataUrl;
	})
	.catch(error => console.error('Error:', error));
	}

	function toggleBackgroundOption() {
	const backgroundOption = document.getElementById('backgroundOptions').value;
	const customBackgroundInput = document.getElementById('customBackgroundInput');
	const colorPicker = document.getElementById('colorPicker');

	if (backgroundOption === 'custom') {
	customBackgroundInput.style.display = 'inline';
	colorPicker.style.display = 'none';
	} else if (backgroundOption === 'color') {
	customBackgroundInput.style.display = 'none';
	colorPicker.style.display = 'inline';
	} else {
	customBackgroundInput.style.display = 'none';
	colorPicker.style.display = 'none';
	}
	}

	function applyBackground() {
	const backgroundOption = document.getElementById('backgroundOptions').value;
	const customBackgroundInput = document.getElementById('customBackgroundInput');
	const colorPicker = document.getElementById('colorPicker');
	const outputImage = document.getElementById('outputImage');

	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;

	if (backgroundOption === 'transparent') {
	// Clear canvas to make it transparent
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	} else if (backgroundOption === 'color') {
	// Fill canvas with color background
	ctx.fillStyle = colorPicker.value;
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	} else if (backgroundOption === 'custom') {
	const file = customBackgroundInput.files[0];
	if (file) {
	const bgImg = new Image();
	bgImg.onload = function() {
	// Resize background image to fit the original image
	const scaleFactor = Math.max(img.width / bgImg.width, img.height / bgImg.height);
	const newWidth = bgImg.width * scaleFactor;
	const newHeight = bgImg.height * scaleFactor;

	canvas.width = newWidth;
	canvas.height = newHeight;

	// Draw resized background image
	ctx.drawImage(bgImg, 0, 0, newWidth, newHeight);

	// Center the original image on the background
	const offsetX = (newWidth - img.width) / 2;
	const offsetY = (newHeight - img.height) / 2;

	// Draw processed image on top
	ctx.drawImage(img, offsetX, offsetY);

	processedImageDataUrl = canvas.toDataURL('image/png');
	outputImage.src = processedImageDataUrl;
	};
	bgImg.src = URL.createObjectURL(file);
	return; // Exit the function to wait for the custom background image to load
	}
	}

	// Draw processed image directly if no custom background is selected
	ctx.drawImage(img, 0, 0);
	processedImageDataUrl = canvas.toDataURL('image/png');
	outputImage.src = processedImageDataUrl;
	};
	img.src = originalImageDataUrl;
	}



	</script>
	</body>
	</html>