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>
Your code is failing for a couple of reasons:
You're drawing what's supposed to be the background image over the image you want to poke holes in (i.e. make the black pixels transparent). It should be the other way around - the remote image should go first, and then, on top of it, the uploaded image with its black pixels removed.
The other issue is that you're trying to load a remote resource which is not an image (despite the JPG extension). You actually need to work with this (obtained via right-clicking on the image loaded from your original link).
The third issue might be CORS, especially if you're testing your code locally (your computer, no local server running, etc). You can overcome this with a browser extension (I used CORS Everywhere - I am in no way affiliated with whoever made it, I just needed something to debug your code, and I settled on this).
One way of addressing these issues is with the following modifications in your code.