You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
celebrityName = "Superstar",
celebrityEmoji = "🌟😎📸",
layout = "right_split",
frameStyle = "polaroid",
caption = "Selfie with the legend!"
) {
// Determine layout variations
const isSplit = layout.includes("split");
const isLeft = layout.includes("left");
const imgW = originalImg.width;
const imgH = originalImg.height;
// Set composite canvas dimensions
const compW = isSplit ? imgW * 2 : imgW;
const compH = imgH;
const compCanvas = document.createElement("canvas");
compCanvas.width = compW;
compCanvas.height = compH;
const ctx = compCanvas.getContext("2d");
// Position original image
const imgX = (isSplit && isLeft) ? imgW : 0;
// Fill background for the original image in case it has transparency
ctx.fillStyle = "#222";
ctx.fillRect(imgX, 0, imgW, imgH);
ctx.drawImage(originalImg, imgX, 0, imgW, imgH);
// Set up celebrity display area bounds
const celebBounds = {
x: isSplit ? (isLeft ? 0 : imgW) : (isLeft ? 0 : imgW / 2),
y: 0,
w: isSplit ? imgW : (imgW / 2),
h: imgH
};
if (isSplit) {
// Draw a glamourous VIP red carpet background
const grad = ctx.createRadialGradient(
celebBounds.x + celebBounds.w / 2, celebBounds.y + celebBounds.h / 2, 0,
celebBounds.x + celebBounds.w / 2, celebBounds.y + celebBounds.h / 2, celebBounds.w
);
grad.addColorStop(0, '#660000');
grad.addColorStop(1, '#110000');
ctx.fillStyle = grad;
ctx.fillRect(celebBounds.x, celebBounds.y, celebBounds.w, celebBounds.h);
// Add random Paparazzi camera flashes
let numFlashes = Math.floor((celebBounds.w * celebBounds.h) / 40000);
numFlashes = Math.max(8, Math.min(40, numFlashes));
for (let i = 0; i < numFlashes; i++) {
const fx = celebBounds.x + Math.random() * celebBounds.w;
const fy = celebBounds.y + Math.random() * celebBounds.h;
const radius = Math.random() * (imgW * 0.05) + (imgW * 0.02);
// Draw glow
ctx.beginPath();
const fGrad = ctx.createRadialGradient(fx, fy, 0, fx, fy, radius);
fGrad.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
fGrad.addColorStop(0.3, 'rgba(255, 255, 255, 0.4)');
fGrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = fGrad;
ctx.arc(fx, fy, radius, 0, Math.PI * 2);
ctx.fill();
// Draw core flash bulb
ctx.beginPath();
ctx.arc(fx, fy, radius * 0.15, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
// Draw starburst lines
ctx.beginPath();
ctx.moveTo(fx, fy - radius * 1.5);
ctx.lineTo(fx, fy + radius * 1.5);
ctx.moveTo(fx - radius * 1.5, fy);
ctx.lineTo(fx + radius * 1.5, fy);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = Math.max(1, imgW * 0.004);
ctx.stroke();
}
}
// Draw Celebrity (represented uniquely by Emoji)
ctx.save();
let emojiSize = isSplit ? (celebBounds.w * 0.4) : (celebBounds.w * 0.6);
if (emojiSize > celebBounds.h * 0.4) emojiSize = celebBounds.h * 0.4;
ctx.font = `${emojiSize}px sans-serif`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// If layout is overlay, add strong drop shadow for contrast against original image
if (!isSplit) {
ctx.shadowColor = 'rgba(0,0,0,0.9)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
}
const emojiX = celebBounds.x + celebBounds.w / 2;
const emojiY = celebBounds.y + celebBounds.h / 2 - (isSplit ? emojiSize * 0.15 : 0);
ctx.fillText(celebrityEmoji, emojiX, emojiY);
ctx.restore();
// Draw Celebrity Name below Emoji
if (isSplit && celebrityName.trim() !== "") {
let nameSize = celebBounds.w * 0.07;
if (nameSize > celebBounds.h * 0.08) nameSize = celebBounds.h * 0.08;
ctx.font = `bold ${nameSize}px "Trebuchet MS", Arial, sans-serif`;
ctx.textAlign = "center";
ctx.textBaseline = "top";
// Gold text gradient
const goldGrad = ctx.createLinearGradient(0, emojiY + emojiSize * 0.6, 0, emojiY + emojiSize * 0.6 + nameSize);
goldGrad.addColorStop(0, '#F5D76E');
goldGrad.addColorStop(0.3, '#E67E22');
goldGrad.addColorStop(0.7, '#F39C12');
goldGrad.addColorStop(1, '#D35400');
ctx.fillStyle = goldGrad;
ctx.shadowColor = 'rgba(0,0,0,0.8)';
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText(celebrityName, emojiX, emojiY + emojiSize * 0.6);
// Reset shadows
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}
// Draw Text Label on CompCanvas if NO polaroid frame is selected
if (frameStyle.toLowerCase() !== "polaroid" && caption.trim() !== "") {
ctx.save();
let labelSize = Math.max(20, compH * 0.06);
ctx.font = `bold ${labelSize}px "Arial Black", impact, sans-serif`;
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
let lx = compW / 2;
let ly = compH - labelSize * 0.5;
ctx.lineWidth = Math.max(3, labelSize * 0.15);
ctx.strokeStyle = "black";
ctx.strokeText(caption, lx, ly);
ctx.fillStyle = "white";
ctx.fillText(caption, lx, ly);
ctx.restore();
return compCanvas;
}
// Apply Polaroid Frame Styling
if (frameStyle.toLowerCase() === "polaroid") {
const finalCanvas = document.createElement("canvas");
const fCtx = finalCanvas.getContext("2d");
const margin = compW * 0.05;
const bottomMargin = caption.trim() !== "" ? compW * 0.15 : compW * 0.1;
finalCanvas.width = compW + margin * 2;
finalCanvas.height = compH + margin + bottomMargin;
// Polaroid paper background
fCtx.fillStyle = "#FAFAFA";
fCtx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
// Inner depth border
fCtx.fillStyle = "#D6D6D6";
fCtx.fillRect(margin - 2, margin - 2, compW + 4, compH + 4);
// Embed the composite photo
fCtx.drawImage(compCanvas, margin, margin);
// Add handwritten-style caption on the polaroid bottom
if (caption.trim() !== "") {
const capSize = Math.max(20, compW * 0.04);
fCtx.font = `bold ${capSize}px "Comic Sans MS", "Caveat", cursive, sans-serif`;
fCtx.textAlign = "center";
fCtx.textBaseline = "middle";
fCtx.fillStyle = "#1c1c1c";
const cx = finalCanvas.width / 2;
const cy = margin + compH + (bottomMargin / 2);
fCtx.fillText(caption, cx, cy);
}
return finalCanvas;
}
return compCanvas;
}Apply Changes
