Skip to content

Instantly share code, notes, and snippets.

@syedusama5556

syedusama5556/gist:cf95c3009486dd02e18998e8b1bd1f73

Created December 2, 2023 05:00
Show Gist options
  • Save syedusama5556/cf95c3009486dd02e18998e8b1bd1f73 to your computer and use it in GitHub Desktop.
Save syedusama5556/cf95c3009486dd02e18998e8b1bd1f73 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
var imagebloburl = "";
var istransparent = true;
var myallfiles;
var verifyCaptcha;
var url = "admin/api/upload_p_g.php";
window.onload = function (e) {
$("#hero").show();
$("#list").hide();
$("#editor").hide();
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("dropfile");
let dropzone = document.getElementById("dropzone");
// var modal = document.getElementById("myModal");
// var span = document.getElementsByClassName("closebtn")[0];
// Prevent default drag behaviors
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
if (dropArea) {
dropArea.addEventListener(eventName, preventDefaults, false);
} else {
}
document.body.addEventListener(eventName, preventDefaults, false);
});
// Handle dropped files
dropzone.addEventListener("drop", handleDrop, false);
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
$("#file").change((e) => {
myallfiles = e.target.files;
// modal.classList.remove("d-none");
if (myallfiles) {
handleFiles(myallfiles);
}
});
$("#filePicker").change((e) => {
myallfiles = e.target.files;
// modal.classList.remove("d-none");
if (myallfiles) {
handleFiles(myallfiles);
}
});
function handleDrop(e) {
var dt = e.dataTransfer;
myallfiles = dt.files;
// modal.classList.remove("d-none");
if (myallfiles) {
handleFiles(myallfiles);
}
}
// span.onclick = function () {
// modal.classList.add("d-none");
// };
let uploadProgress = [];
let progressBar = document.getElementById("progress-bar");
function initializeProgress(numFiles) {
progressBar.classList.remove("d-none");
progressBar.style.width = "0%";
progressBar.innerHTML = "0%";
uploadProgress = [];
for (let i = numFiles; i > 0; i--) {
uploadProgress.push(0);
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent;
let total =
uploadProgress.reduce((tot, curr) => tot + curr, 0) /
uploadProgress.length;
total = parseInt(total);
progressBar.style.width = +total + "%";
progressBar.innerHTML = +total + "%";
if (total === 100) {
$("#progress-bar").addClass("d-none");
$("#loader").removeClass("d-none");
}
}
function handleFiles(files) {
files = [...files];
if (files.length > 1) {
files = files.splice(1);
}
if (files[0].size >= 1024 * 1034 * 5) {
alert("To big, maximum size is 5MB");
} else {
initializeProgress(files.length);
files.forEach(uploadFile);
files.forEach(previewFile);
}
}
function previewFile(file) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
let img = document.getElementById("before");
img.src = reader.result;
};
}
function uploadFile(file, i) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
xhr.open("POST", url, true);
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function (e) {
updateProgress(i, (e.loaded * 100.0) / e.total || 100);
});
xhr.addEventListener("readystatechange", function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100); // <- Add this
//todo
if (this.response) {
var res_stt = JSON.parse(this.response);
if (res_stt.status == true) {
$("#hero").hide();
$("#list").show();
var imageUrl =
"data:image/png;base64, " + JSON.parse(this.response).imagebase64;
let img = document.getElementById("after");
img.src = imageUrl;
imagebloburl = imageUrl;
$("#progress-bar").hide();
$("#loader").addClass("d-none");
$("#filePicker").attr("disabled", true);
} else {
var mymess = res_stt.message
? res_stt.message
: "Error Converting this image";
alert(mymess);
$("#progress-bar").hide();
$("#loader").addClass("d-none");
imagebloburl = "";
}
} else {
alert("Error Converting this image");
$("#progress-bar").hide();
$("#loader").addClass("d-none");
imagebloburl = "";
}
} else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
$("#progress-bar").hide();
$("#loader").addClass("d-none");
imagebloburl = "";
alert("Error getting info from server");
} else if (xhr.readyState != 4 && xhr.status != 200) {
// Error. Inform the user
$("#progress-bar").hide();
$("#loader").addClass("d-none");
imagebloburl = "";
alert("Error Sending Request");
}
});
if (email) {
formData.append("email", email);
}
formData.append("file", file);
xhr.send(formData);
}
// };
// color option selector
$(function () {
$(".cutout-options").on("click", "li", function () {
let options = $(this).attr("id");
var colorcode = "#ffffff00";
switch (options) {
case "fill-none":
colorcode = "#ffffff00";
istransparent = true;
break;
case "fill-white":
colorcode = "#ffffff";
istransparent = false;
break;
case "fill-black":
colorcode = "#000000";
istransparent = false;
break;
case "fill-picker":
$("#colorPicker").change(function () {
$(".img-container").css({ background: $(this).val() });
});
break;
default:
break;
}
$(".img-container").css({ background: colorcode });
// remove classname 'active' from all li who already has classname 'active'
$(".cutout-options li.marked").removeClass("marked");
// adding classname 'active' to current click li
$(this).addClass("marked");
});
});
$(function () {
$(".img-btn").click(function (e) {
const title = e.target.innerHTML;
if (title.trim() == "Original") {
$("#after").addClass("d-none");
$("#before").removeClass("d-none");
} else if (title.trim() == "Removed Background") {
$("#before").addClass("d-none");
$("#after").removeClass("d-none");
}
// remove classes from all
$(".img-btn").removeClass("active-img-link");
// add class to the one we clicked
$(this).addClass("active-img-link");
});
});
// verifyCaptcha = async (token) => {
// recaptcha_response = token;
// var settings = {
// url: "admin/api/captcha_verify.php",
// method: "POST",
// timeout: 0,
// headers: {
// "Content-Type": "application/json",
// },
// data: JSON.stringify({
// token: token,
// }),
// };
// var mybool = false;
// await $.ajax(settings).done(function (response) {
// const responseData = JSON.parse(response)
// if (responseData.status == true) {
// grecaptcha.reset();
// mybool = true;
// if (myallfiles) {
// modal.classList.add("d-none");
// handleFiles(myallfiles);
// } else {
// }
// } else {
// grecaptcha.reset();
// mybool = false;
// }
// });
// return mybool;
// };
};
function editor() {
$("#editor").show();
window.location.hash = "#editor";
if (istransparent) {
loadeditor(imagebloburl);
} else {
html2canvas(document.querySelector(".img-container")).then((canvas) => {
canvas.toBlob((blob) => {
let URLObj = window.URL || window.webkitURL;
var bbb = URLObj.createObjectURL(blob);
loadeditor(bbb);
});
});
}
}
function screenShot() {
if (istransparent) {
downloadURI(imagebloburl, "REMBG_ImageFile.png");
} else {
html2canvas(document.querySelector(".img-container")).then((canvas) => {
var myImage = canvas.toDataURL("image/png");
downloadURI(myImage, "REMBG_ImageFile.png");
});
}
}
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
}
// editor code
function loadeditor(imageUrl) {
const { TABS, TOOLS } = FilerobotImageEditor;
const config = {
source: imageUrl,
onSave: (editedImageObject, designState) => {
let tmpLink = document.createElement("a");
tmpLink.href = editedImageObject.imageBase64;
tmpLink.download = editedImageObject.fullName;
tmpLink.style = "position: absolute; z-index: -111; visibility: none;";
document.body.appendChild(tmpLink);
tmpLink.click();
document.body.removeChild(tmpLink);
tmpLink = null;
},
annotationsCommon: {
fill: "#ff0000",
},
Text: { text: "Filerobot..." },
Rotate: { angle: 90, componentType: "slider" },
translations: {
profile: "Profile",
coverPhoto: "Cover photo",
facebook: "Facebook",
socialMedia: "Social Media",
fbProfileSize: "180x180px",
fbCoverPhotoSize: "820x312px",
},
Crop: {
presetsItems: [
{
titleKey: "classicTv",
descriptionKey: "4:3",
ratio: 4 / 3,
},
{
titleKey: "cinemascope",
descriptionKey: "21:9",
ratio: 21 / 9,
},
],
presetsFolders: [
{
titleKey: "socialMedia",
groups: [
{
titleKey: "facebook",
items: [
{
titleKey: "profile",
width: 180,
height: 180,
descriptionKey: "fbProfileSize",
},
{
titleKey: "coverPhoto",
width: 820,
height: 312,
descriptionKey: "fbCoverPhotoSize",
},
],
},
],
},
],
},
tabsIds: [
TABS.ADJUST,
TABS.ANNOTATE,
TABS.WATERMARK,
TABS.FILTERS,
TABS.FINETUNE,
TABS.RESIZE,
], // or ['Adjust', 'Annotate', 'Watermark']
defaultTabId: TABS.ANNOTATE, // or 'Annotate'
defaultToolId: TOOLS.TEXT, // or 'Text'
};
const filerobotImageEditor = new FilerobotImageEditor(
document.querySelector("#editor_container"),
config
);
filerobotImageEditor.render({
onClose: (closingReason) => {
filerobotImageEditor.terminate();
$("#editor").hide();
},
});
}
// editor code
function unhide() {
grecaptcha.reset();
let progressBar = document.getElementById("progress-bar");
progressBar.value = 0;
imagebloburl = "";
$("#hero").show();
$("#list").hide();
$("#editor").hide();
colorcode = "#ffffff00";
istransparent = true;
$(".img-container").css({ background: colorcode });
$(".cutout-options li.marked").removeClass("marked");
$("#fill-none").addClass("marked");
$(".img-btn").removeClass("active-img-link");
$("#rembg").addClass("active-img-link");
}
$("#dropfile").dragster({
enter: function (dragsterEvent, event) {
$("#dropzone").removeClass("d-none");
},
leave: function (dragsterEvent, event) {
$("#dropzone").addClass("d-none");
},
drop: function (dragsterEvent, event) {
$("#dropzone").addClass("d-none");
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment