File size: 5,560 Bytes
0686732 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | <!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>
|