You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(
originalImg,
theme = "Neon City",
effectIntensity = 5,
topText = "BH6 AU_DETECTED",
bottomText = "REPLACER PROTOCOL"
) {
// Dynamically load a sci-fi font to match the Big Hero 6 / Tech aesthetic
await new Promise((resolve) => {
const link = document.createElement("link");
link.href = "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap";
link.rel = "stylesheet";
document.head.appendChild(link);
// Fallback timeout to ensure we proceed even if the network is slow
setTimeout(resolve, 800);
});
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
// Draw the base image
ctx.drawImage(originalImg, 0, 0, width, height);
const intensityNum = Number(effectIntensity) || 0;
const themeName = theme.toString().toLowerCase();
const isMedical = themeName.includes("medical") || themeName.includes("baymax");
const isMicrobot = themeName.includes("microbot") || themeName.includes("villain");
let uiColor = "#00ffff"; // Cyan default (Hiro / Tech)
let tintColor = `rgba(80, 0, 150, ${Math.min(0.8, intensityNum * 0.05)})`;
if (isMedical) {
uiColor = "#00ff99";
tintColor = `rgba(150, 255, 200, ${Math.min(0.5, intensityNum * 0.03)})`;
} else if (isMicrobot) {
uiColor = "#ff3300";
tintColor = `rgba(80, 10, 10, ${Math.min(0.8, intensityNum * 0.06)})`;
}
// 1. Digital Glitch Effect
if (intensityNum > 0) {
const slices = Math.floor(intensityNum * 3);
for (let i = 0; i < slices; i++) {
const sh = Math.max(2, (Math.random() * 0.05) * height);
const sy = Math.random() * (height - sh);
const dx = (Math.random() - 0.5) * (width * (intensityNum / 100));
// Shift this slice horizontally
ctx.drawImage(canvas, 0, sy, width, sh, dx, sy, width, sh);
}
// RGB Split Simulation
if (intensityNum > 3) {
const tempCanvas = document.createElement("canvas");
tempCanvas.width = width; tempCanvas.height = height;
tempCanvas.getContext("2d").drawImage(canvas, 0, 0);
ctx.globalCompositeOperation = "screen";
ctx.globalAlpha = 0.3;
// Shift for Red/Cyan pseudo-glitch
ctx.drawImage(tempCanvas, intensityNum * 2, 0);
ctx.drawImage(tempCanvas, -intensityNum * 2, 0);
ctx.globalAlpha = 1.0;
ctx.globalCompositeOperation = "source-over";
}
}
// 2. Base Theme Tint Overlay
ctx.fillStyle = tintColor;
ctx.fillRect(0, 0, width, height);
// 3. Vignette
const gradient = ctx.createRadialGradient(width / 2, height / 2, width / 4, width / 2, height / 2, width);
gradient.addColorStop(0, "rgba(0,0,0,0)");
gradient.addColorStop(1, "rgba(0,0,0,0.6)");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
// Helpers
function drawHexagon(cx, cy, r, filled = false) {
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = (i * 2 * Math.PI) / 6;
const x = cx + r * Math.sin(angle);
const y = cy + r * Math.cos(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
if (filled) ctx.fill();
else ctx.stroke();
}
// 4. Overlays & Motifs
if (isMicrobot) {
// Yokai's Microbots (dark swarm from bottom)
ctx.fillStyle = "rgba(10, 10, 10, 0.9)";
ctx.strokeStyle = "rgba(40, 40, 40, 0.8)";
ctx.lineWidth = Math.max(1, width / 800);
const r = Math.max(width, height) / 35;
for (let y = height + r; y > height * 0.4; y -= r * 1.5) {
const probability = (y - height * 0.4) / (height * 0.6);
for (let x = -r; x < width + r; x += r * Math.sqrt(3)) {
if (Math.random() < probability) {
let offset = (Math.round(y / (r * 1.5)) % 2 === 0) ? 0 : (r * Math.sqrt(3)) / 2;
drawHexagon(x + offset, y, r * 0.85, true);
drawHexagon(x + offset, y, r * 0.85, false);
}
}
}
} else if (isMedical) {
// Baymax Scan UI
ctx.strokeStyle = "rgba(0, 255, 153, 0.4)";
ctx.lineWidth = Math.max(2, height * 0.005);
const scanY = (intensityNum / 10) * height; // Static based on param
ctx.beginPath(); ctx.moveTo(0, scanY); ctx.lineTo(width, scanY); ctx.stroke();
ctx.fillStyle = "rgba(0, 255, 153, 0.1)";
ctx.fillRect(0, 0, width, scanY);
// Subdued Baymax Face overlay in background
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
const eyeR = width / 15;
const eyeDist = width / 6;
const cx = width / 2, cy = height / 2;
ctx.beginPath(); ctx.arc(cx - eyeDist, cy, eyeR, 0, Math.PI * 2); ctx.fill();
ctx.beginPath(); ctx.arc(cx + eyeDist, cy, eyeR, 0, Math.PI * 2); ctx.fill();
ctx.lineWidth = eyeR * 0.2;
ctx.beginPath(); ctx.moveTo(cx - eyeDist, cy); ctx.lineTo(cx + eyeDist, cy); ctx.stroke();
} else {
// Default Neon City / Hiro Tech (Wireframe grids + hexagons)
ctx.strokeStyle = "rgba(0, 255, 255, 0.15)";
ctx.lineWidth = Math.max(1, width / 500);
const gridBox = width / 15;
for (let x = 0; x < width; x += gridBox) {
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke();
}
for (let y = 0; y < height; y += gridBox) {
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke();
}
// Floating Tech Hexagons
ctx.strokeStyle = uiColor;
ctx.fillStyle = "rgba(0, 255, 255, 0.1)";
for (let i = 0; i < 5 + intensityNum; i++) {
drawHexagon(Math.random() * width, Math.random() * height, Math.random() * (width / 15) + 10, true);
drawHexagon(Math.random() * width, Math.random() * height, Math.random() * (width / 10) + 20, false);
}
}
// 5. Tech Framings
ctx.strokeStyle = uiColor;
ctx.lineWidth = Math.max(3, width * 0.01);
const pad = Math.min(width, height) * 0.05;
// Corner brackets
ctx.beginPath();
ctx.moveTo(pad, pad * 2); ctx.lineTo(pad, pad); ctx.lineTo(pad * 2, pad); // Top-left
ctx.moveTo(width - pad * 2, pad); ctx.lineTo(width - pad, pad); ctx.lineTo(width - pad, pad * 2); // Top-right
ctx.moveTo(pad, height - pad * 2); ctx.lineTo(pad, height - pad); ctx.lineTo(pad * 2, height - pad); // Bottom-left
ctx.moveTo(width - pad * 2, height - pad); ctx.lineTo(width - pad, height - pad); ctx.lineTo(width - pad, height - pad * 2); // Bottom-right
ctx.stroke();
// Minor decorative specs
ctx.font = `${Math.max(10, width / 60)}px 'Share Tech Mono', 'Courier New', monospace`;
ctx.fillStyle = uiColor;
ctx.textAlign = "left";
ctx.fillText(`SYS.VER: ${(intensityNum * 1.337).toFixed(3)}`, pad, pad - 5);
ctx.textAlign = "right";
ctx.fillText(`AU_INDEX: SF-${Date.now().toString().slice(-4)}`, width - pad, pad - 5);
// 6. Output Text Rendering
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = `bold ${Math.max(20, width / 25)}px 'Share Tech Mono', 'Courier New', monospace`;
ctx.shadowColor = uiColor;
ctx.shadowBlur = width / 60;
ctx.fillStyle = "#ffffff";
if (topText) {
ctx.fillText(topText, width / 2, pad * 1.5);
}
if (bottomText) {
ctx.fillText(bottomText, width / 2, height - (pad * 1.5));
}
// Clear shadow state
ctx.shadowBlur = 0;
return canvas;
}Apply Changes
