You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, roleplayName = "Soldier", rankName = "Recruit") {
// 1. Create Main Container
const container = document.createElement('div');
container.style.fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
container.style.maxWidth = "600px";
container.style.margin = "0 auto";
container.style.padding = "20px";
container.style.backgroundColor = "#1e1e1e";
container.style.color = "#f5f5f5";
container.style.borderRadius = "12px";
container.style.boxShadow = "0 8px 16px rgba(0,0,0,0.5)";
container.style.textAlign = "center";
// 2. Add Titles
const title = document.createElement('h2');
title.innerText = "Roblox Army RP Document ID Finder";
title.style.margin = "0 0 5px 0";
title.style.color = "#ff4d4d"; // Army RP styled red
container.appendChild(title);
const subTitle = document.createElement('p');
subTitle.innerText = "Scan a screenshot for an existing ID, or prepare a new document photo (Поиск ID / Подготовка фото)";
subTitle.style.margin = "0 0 20px 0";
subTitle.style.fontSize = "14px";
subTitle.style.color = "#aaaaaa";
container.appendChild(subTitle);
// 3. Create Canvas for New Document Preparation (Square Crop)
const canvas = document.createElement('canvas');
canvas.width = 420;
canvas.height = 420;
canvas.style.width = "100%";
canvas.style.maxWidth = "300px";
canvas.style.borderRadius = "8px";
canvas.style.border = "2px solid #555";
container.appendChild(canvas);
const ctx = canvas.getContext('2d');
// Calculate center crop to make it a perfect square (standard for Roblox Decals)
const size = Math.min(originalImg.width, originalImg.height);
const xOffset = (originalImg.width - size) / 2;
const yOffset = (originalImg.height - size) / 2;
// Draw white background
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw and center crop the image
ctx.drawImage(originalImg, xOffset, yOffset, size, size, 10, 10, 400, 400);
// Overlay text for RP immersion
ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
ctx.fillRect(10, 360, 400, 50);
ctx.fillStyle = "#ffffff";
ctx.font = "bold 20px 'Courier New', Courier, monospace";
ctx.textAlign = "center";
ctx.fillText(`ARMY RP: ${rankName.toUpperCase()}`, canvas.width / 2, 382);
ctx.font = "14px 'Courier New', Courier, monospace";
ctx.fillText(`${roleplayName.toUpperCase()}`, canvas.width / 2, 402);
// 4. Instructions for Getting a New ID
const infoDiv = document.createElement('div');
infoDiv.style.marginTop = "20px";
infoDiv.style.padding = "15px";
infoDiv.style.backgroundColor = "#2b2b2b";
infoDiv.style.borderRadius = "8px";
infoDiv.style.textAlign = "left";
const instTitle = document.createElement('p');
instTitle.style.margin = "0 0 10px 0";
instTitle.innerHTML = `<strong>Need a new Image ID?</strong><br>Roblox requires images to be uploaded to their servers to generate an ID for your RP Document.`;
infoDiv.appendChild(instTitle);
const steps = document.createElement('ol');
steps.style.paddingLeft = "20px";
steps.style.lineHeight = "1.6";
steps.style.margin = "0";
steps.innerHTML = `
<li>Right-click (or long-press) the formatted photo above and <strong>Save Image</strong>.</li>
<li>Go to the <a href="https://create.roblox.com/dashboard/creations?activeTab=Decal" target="_blank" style="color: #4da8da; text-decoration: none;">Roblox Creator Dashboard</a>.</li>
<li>Upload the image as a Decal.</li>
<li>Open the uploaded decal and look at your browser's URL address bar.</li>
<li>Copy the numbers from the link (e.g., roblox.com/library/<strong>1234567890</strong>/...). <br><strong>This is your RP Document Image ID!</strong></li>
`;
infoDiv.appendChild(steps);
container.appendChild(infoDiv);
// 5. OCR Section (To scan for IDs if the user uploaded a screenshot)
const ocrDiv = document.createElement('div');
ocrDiv.style.marginTop = "20px";
ocrDiv.style.padding = "15px";
ocrDiv.style.backgroundColor = "#1a1a1a";
ocrDiv.style.borderRadius = "8px";
ocrDiv.style.border = "1px dashed #777";
ocrDiv.innerHTML = `<p style="margin:0; font-size: 14px; color: #aaa;">Scanning uploaded image for existing Roblox IDs...</p>`;
container.appendChild(ocrDiv);
// 6. Execute OCR Asynchronously
(async () => {
try {
// Load Tesseract.js dynamically if not available
if (typeof window.Tesseract === 'undefined') {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
const worker = await Tesseract.createWorker('eng');
const ret = await worker.recognize(originalImg);
const text = ret.data.text;
await worker.terminate();
// Search for numeric strings that match typical Roblox ID lengths (8 to 15 digits)
const idRegex = /(?<!\d)[0-9]{8,15}(?!\d)/g;
const foundIDs = text.match(idRegex);
if (foundIDs && foundIDs.length > 0) {
const uniqueIDs = [...new Set(foundIDs)];
ocrDiv.innerHTML = `<p style="margin: 0 0 10px 0; color: #4da8da; font-weight: bold;">Found potential Image IDs in your screenshot (Найдены ID):</p>`;
const idList = document.createElement('div');
idList.style.display = "flex";
idList.style.flexDirection = "column";
idList.style.gap = "5px";
uniqueIDs.forEach(id => {
const idItem = document.createElement('div');
idItem.style.backgroundColor = "#333";
idItem.style.padding = "8px";
idItem.style.borderRadius = "4px";
idItem.style.fontWeight = "bold";
idItem.style.fontSize = "16px";
idItem.style.color = "#fff";
idItem.innerText = id;
idList.appendChild(idItem);
});
ocrDiv.appendChild(idList);
} else {
ocrDiv.innerHTML = `<p style="margin:0; font-size: 14px; color: #aaa;">No existing IDs detected in the image. Follow the steps above to upload and get a new one.</p>`;
}
} catch (err) {
ocrDiv.innerHTML = `<p style="margin:0; font-size: 14px; color: #ff6666;">Scan interrupted (OCR unavailable). If you need a new ID, use the upload steps above.</p>`;
}
})();
// Returns the element wrapper immediately while the OCR scan runs in the background
return container;
}Apply Changes
