89 lines
4.9 KiB
JavaScript
89 lines
4.9 KiB
JavaScript
import { app } from "../../scripts/app.js";
|
|
|
|
app.registerExtension({
|
|
name: "Comfy.RikanHiddenBase64ImageLoader",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "RikanHiddenBase64ImageLoader") {
|
|
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
|
|
|
nodeType.prototype.onNodeCreated = function () {
|
|
const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
|
|
|
// 1. Setup UI Textbox Base64
|
|
const base64Widget = this.widgets.find((w) => w.name === "base64_data");
|
|
if (base64Widget) {
|
|
base64Widget.computeSize = function() { return [this.width || 200, 85]; };
|
|
if (base64Widget.inputEl) {
|
|
base64Widget.inputEl.style.setProperty("height", "60px", "important");
|
|
base64Widget.inputEl.style.setProperty("max-height", "60px", "important");
|
|
base64Widget.inputEl.style.setProperty("min-height", "60px", "important");
|
|
base64Widget.inputEl.style.setProperty("resize", "none", "important");
|
|
base64Widget.inputEl.style.overflowY = "scroll";
|
|
base64Widget.inputEl.style.overflowX = "hidden";
|
|
base64Widget.inputEl.style.wordBreak = "break-all";
|
|
}
|
|
}
|
|
|
|
// 2. Setup Upload File
|
|
const fileInput = document.createElement("input");
|
|
fileInput.type = "file";
|
|
fileInput.accept = "image/*";
|
|
fileInput.style.display = "none";
|
|
document.body.appendChild(fileInput);
|
|
|
|
fileInput.addEventListener("change", (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
const rawBase64 = event.target.result.split(',')[1];
|
|
if (base64Widget) base64Widget.value = rawBase64;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
this.addWidget("button", "Upload Image (Local Blob)", "upload", () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
// 3. Tombol Popup View
|
|
this.addWidget("button", "🔍 View Decoded Image", "view", () => {
|
|
if (base64Widget && base64Widget.value) {
|
|
// Jalankan fungsi popup dari dalam
|
|
let cleanB64 = base64Widget.value;
|
|
if (cleanB64.includes(",")) cleanB64 = cleanB64.split(",")[1];
|
|
|
|
const overlay = document.createElement("div");
|
|
overlay.style.cssText = "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 10000; display: flex; justify-content: center; align-items: center;";
|
|
|
|
const modal = document.createElement("div");
|
|
modal.style.cssText = "background: #222; padding: 20px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; max-width: 90vw; max-height: 90vh; box-shadow: 0 10px 25px rgba(0,0,0,0.8);";
|
|
modal.onclick = (e) => e.stopPropagation();
|
|
|
|
const img = document.createElement("img");
|
|
img.src = "data:image/png;base64," + cleanB64;
|
|
img.style.cssText = "max-width: 100%; max-height: 70vh; object-fit: contain; background: #000; border: 1px solid #444; border-radius: 6px;";
|
|
modal.appendChild(img);
|
|
|
|
const closeBtn = document.createElement("button");
|
|
closeBtn.innerText = "Close & Clear Memory";
|
|
closeBtn.style.cssText = "margin-top: 15px; padding: 10px; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%; font-size: 14px;";
|
|
|
|
const destroyPopup = () => { img.src = ""; overlay.remove(); };
|
|
closeBtn.onclick = destroyPopup;
|
|
overlay.onclick = destroyPopup;
|
|
|
|
modal.appendChild(closeBtn);
|
|
overlay.appendChild(modal);
|
|
document.body.appendChild(overlay);
|
|
} else {
|
|
alert("The form is empty. Please paste a Base64 string or upload an image first.");
|
|
}
|
|
});
|
|
|
|
return r;
|
|
};
|
|
}
|
|
}
|
|
}); |