View file Remove image backgrounds/remove-bg/dark/assets/js/custom.js

"use strict";

const bgimagetabcontentdiv = document.getElementById('bgimagetabcontentdiv');
const bgimagenavlinkdiv = document.getElementById('bgimagenavlinkdiv');
const selectableImages = document.querySelectorAll('.selectable');
const imageInput = document.getElementById('imageInput');
const backgroundtransparent = document.getElementById('backgroundtransparent');
const uploadImage = document.getElementById('uploadimage');
const ForegroundimageInput = document.getElementById('ForegroundimageInput');
const bgcolortabcontentdiv = document.getElementById('bgcolortabcontentdiv');


// Function to handle the image upload
ForegroundimageInput.addEventListener('change', (event) => {
    const file = event.target.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {

            // Create a new image element
            const uploadedImage = new Image();
            uploadedImage.src = e.target.result;
            uploadedImage.alt = 'Uploaded Image';
           // uploadedImage.style.width = '100%'; // Adjust the width as needed
            uploadedImage.className = 'img-fluid mx-auto d-block mt-25'; // Adjust the className as needed
            // uploadedImage.style.height  = '600px'; 
            // uploadedImage.style.width  = '600px'; 
            // uploadedImage.style.transform  = 'translate(0%, 75%)';

            // Clear any existing content in bgcolortabcontentdiv
            bgcolortabcontentdiv.innerHTML = '';

            // Append the uploaded image to bgcolortabcontentdiv
            bgcolortabcontentdiv.appendChild(uploadedImage);
            
            // Set the src attribute of uploadimage to the selected image path
            uploadImage.src = e.target.result;

            // Set the background image of bgimagetabcontentdiv
            // bgimagetabcontentdiv.src = e.target.result;
             bgimagetabcontentdiv.style.backgroundImage = `url('${e.target.result}')`;
            bgimagetabcontentdiv.classList.add('custom-bg-image');
        };

        reader.readAsDataURL(file);
    }
});

// Function to handle the image upload
imageInput.addEventListener('change', (event) => {
    const file = event.target.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
            // Set the src attribute of backgroundtransparent to the selected image path
            backgroundtransparent.src = e.target.result;
            
        };

        reader.readAsDataURL(file);
    }
});

selectableImages.forEach((image) => {
    image.addEventListener('click', () => {
        const selectedImage = image.getAttribute('data-image');
        const imagePath = 'input/' + selectedImage;
        
        // If there is an image in bgimagetabcontentdiv, remove it
        if (backgroundtransparent.src) {
            backgroundtransparent.src = ''; // Clear the source to remove the image
        }

        // Set the src attribute of backgroundtransparent to the selected image path
        backgroundtransparent.src = imagePath;
    });
});