Scribd
Upload
9 views6 pages

I Have A Website Made With Wordpress

The document describes the implementation of a background removal feature on a WordPress website using Elementor. It includes three code snippets: one for handling the front-end form submission, another for enqueuing the necessary JavaScript, and a third for processing the image through an API. Additionally, it provides HTML and CSS code for the user interface, including a form for image upload and a loader for processing feedback.

Uploaded by

ahsan.cse.101792
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views6 pages

I Have A Website Made With Wordpress

The document describes the implementation of a background removal feature on a WordPress website using Elementor. It includes three code snippets: one for handling the front-end form submission, another for enqueuing the necessary JavaScript, and a third for processing the image through an API. Additionally, it provides HTML and CSS code for the user interface, including a form for image upload and a loader for processing feedback.

Uploaded by

ahsan.cse.101792
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

I have a website made with Wordpress and Elementor.

I added a feature remove


background from photo.
I add 3 code snippet .
Code Snippet 1: background-remover
code:

document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('background-remover-form');
const resultDiv = document.getElementById('result');
const loader = document.getElementById('loader');

form.addEventListener('submit', function (e) {


e.preventDefault();

// Show the loader


loader.style.display = 'block';
resultDiv.innerHTML = ''; // Clear previous results

const formData = new FormData(form);

fetch(ajax_object.ajax_url + '?action=remove_background', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
// Hide the loader
loader.style.display = 'none';

if (data.error) {
resultDiv.innerHTML = `<p style="color:red;">${data.error}</p>`;
} else {
resultDiv.innerHTML = `
<img src="data:image/png;base64,${data.image}" alt="Processed
Image" style="max-width:100%;"/>
<a href="${data.download_url}" download="no-bg.png"
style="display:block; margin-top:10px;">Download Image</a>
`;
}
})
.catch(error => {
// Hide the loader
loader.style.display = 'none';
resultDiv.innerHTML = `<p style="color:red;">An error occurred: $
{error.message}</p>`;
});
});
});

code snippet 2: ajax


code:
function enqueue_background_remover_script() {
wp_enqueue_script('background-remover', get_template_directory_uri() .
'/background-remover.js', ['jquery'], null, true);

// Localize the script to pass the admin-ajax.php URL


wp_localize_script('background-remover', 'ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
]);
}
add_action('wp_enqueue_scripts', 'enqueue_background_remover_script');

code snippet 3: Remove Background Functionality


code:
add_action('wp_ajax_remove_background', 'remove_background_function');
add_action('wp_ajax_nopriv_remove_background', 'remove_background_function');

function remove_background_function() {
// Check if a file is uploaded
if (!empty($_FILES['image_upload']['name'])) {
$api_key = 'Ruec5pxTkKmsv3979gFaNbt8'; // Your Remove.bg API Key
$file = $_FILES['image_upload'];

// Check if the file upload was successful


if ($file['error'] === UPLOAD_ERR_OK) {
$url = 'https://api.remove.bg/v1.0/removebg';

$data = [
'image_file' => new CURLFile($file['tmp_name']),
'size' => 'auto'
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'X-API-Key: ' . $api_key,
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);

// Check for cURL errors


if (curl_errno($ch)) {
echo json_encode(['error' => 'cURL Error: ' . curl_error($ch)]);
curl_close($ch);
exit;
}

curl_close($ch);

// If the API response is successful


if ($response) {
// Save the image to the WordPress uploads directory
$upload_dir = wp_upload_dir();
$filename = 'bg_removed_' . uniqid() . '.png';
$file_path = $upload_dir['path'] . '/' . $filename;
file_put_contents($file_path, $response);

// Generate a public URL for the saved image


$download_url = $upload_dir['url'] . '/' . $filename;

// Return JSON response with image and download URL


header('Content-Type: application/json');
echo json_encode([
'image' => base64_encode($response), // Base64 encoded image
for preview
'download_url' => $download_url // Public URL for download
]);
exit;
} else {
echo json_encode(['error' => 'Failed to process the image.']);
exit;
}
} else {
echo json_encode(['error' => 'File upload error.']);
exit;
}
} else {
echo json_encode(['error' => 'No file uploaded.']);
exit;
}
}

Html css Code in the elementor <HTML/> section:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Remover</title>
<style>
/* Global Styles */
body {
font-family: "Roboto", Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #eef2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

/* Card Container */
#background-remover {
background-color: ;
border-radius: 16px;
box-shadow: 0 0 100px rgba(136, 253, 239, 0.6);
padding: 25px;
max-width: 400px;
width: 90%;
text-align: center;
background: #ffffff;
}

#contact-us-button {
background-color: #3498db;
color: #fff;
font-size: 1rem;
border: none;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}

#condition-contact {
display: flex;
text-align: center;
font-size: 10px;
align-items: center;
justify-content: center;
}

#contact-us-button:hover {
background-color: red;
}

/* Form Styles */
#background-remover-form {
margin-bottom: 20px;
}

label {
font-size: 1rem;
font-weight: 600;
display: block;
margin-bottom: 10px;
color: #0c0d0e;
}

input[type="file"] {
border: 1px solid #09dfdf;
border-radius: 8px;
padding: 10px;
width: 100%;
box-sizing: border-box;
transition: border-color 0.3s ease;
background-color: #c4c7c7;
}

input[type="file"]:focus {
border-color: #028ce7;
outline: none;
}

form button {
background: linear-gradient(135deg, #03df0e, #007bff);
color: #ffffff;
font-size: 1rem;
border: none;
border-radius: 8px;
padding: 12px 20px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
margin-top: 15px;
}

form button:hover {
background: linear-gradient(135deg, #007bff, #4cafef);
transform: translateY(-2px);
}

form button:active {
transform: translateY(0);
}

/* Loader Styles */
.spinner {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #4cafef; /* Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: auto;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

#loader {
display: none;
margin-top: 20px;
}

#loader p {
font-size: 0.9rem;
margin-top: 10px;
color: #555;
}

/* Result Section */
#result img {
max-width: 100%;
height: auto;
margin-top: 20px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#result a {
display: inline-block;
margin-top: 10px;
padding: 12px 25px;
background: linear-gradient(135deg, #28a745, #2ecc71);
color: #fff;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s ease, transform 0.2s ease;
}

#result a:hover {
background: linear-gradient(135deg, #2ecc71, #28a745);
transform: translateY(-2px);
}

</style>
</head>
<body>
<div id="background-remover">
<form id="background-remover-form" enctype="multipart/form-data">
<label for="image_upload">Upload an Image:</label>
<input
type="file"
id="image_upload"
name="image_upload"
accept="image/*"
required
/>
<button type="submit">Remove Background</button>
</form>

<!-- Loader -->


<div id="loader">
<div class="spinner"></div>
<p>Processing... Please wait.</p>
</div>

<!-- Result -->


<div id="result">
<!-- Processed image and download link will appear here -->
</div>
<!-- Add this button below your result section -->

<div class="condition-contact">
<h6 class="condition" style="text-align: center">
To download the output photo you need to click on the contact us button.
</h6>
</div>
</div>
</body>
</html>

You might also like