essentially what i’m trying to create is a simple Java app that when an image is uploaded it removes the black from the background and makes it transparent, then stores this image. Then, the image from this URL ‘https://pasteboard.co/VA1RxuEWqS4u.jpg’ is used as a background image and the javascript overlays the image with the background that has been removed onto the pasteboard one and automatically downloads the finished result. When I run this, nothing happens, any help would be greatly appreciated.
Here is the code:
<!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 and Overlay</title>
<style>
#upload-btn {
width: 100px;
height: 40px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="file" id="file-input" style="display: none;">
<button id="upload-btn">Upload Image</button>
<script>
document.getElementById('upload-btn').addEventListener('click', function() {
document.getElementById('file-input').click();
});
document.getElementById('file-input').addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
// Draw the image on the canvas
ctx.drawImage(img, 0, 0);
// Get the image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Remove black background (set alpha to 0 for black pixels)
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// Check if the pixel is black (you can adjust the threshold as needed)
if (r < 30 && g < 30 && b < 30) {
data[i + 3] = 0; // Set alpha to 0
}
}
// Put the modified image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
// Convert canvas to image and download
const transparentImageUrl = canvas.toDataURL('image/png');
// Load the overlay image from the hosting website
const overlayImageUrl = 'https://pasteboard.co/VA1RxuEWqS4u.jpg';
const overlayImg = new Image();
overlayImg.crossOrigin = 'anonymous';
overlayImg.onload = function() {
// Draw the overlay image on the canvas
ctx.drawImage(overlayImg, 0, 0, canvas.width, canvas.height);
// Convert canvas to image and download the final image
const finalImageUrl = canvas.toDataURL('image/png');
const downloadLink = document.createElement('a');
downloadLink.href = finalImageUrl;
downloadLink.download = 'final_image.png';
downloadLink.click();
};
overlayImg.src = overlayImageUrl;
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>