You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, movieName = "INCEPTION (2010)", hudColor = "#00ffff", scanPosition = "45") {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// Draw the original image as the background
ctx.drawImage(originalImg, 0, 0);
// Apply a global subtle tech tint
const color = hudColor;
ctx.fillStyle = 'rgba(0, 30, 30, 0.15)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = color;
ctx.fillStyle = color;
ctx.textBaseline = 'top';
const pos = parseFloat(scanPosition);
const scanY = canvas.height * ((isNaN(pos) ? 45 : pos) / 100);
// Draw HUD Grid
ctx.lineWidth = 1;
ctx.globalAlpha = 0.15;
const gridStep = Math.max(20, Math.floor(Math.min(canvas.width, canvas.height) / 20));
for (let x = 0; x < canvas.width; x += gridStep) {
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke();
}
for (let y = 0; y < canvas.height; y += gridStep) {
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke();
}
// Apply Vignette for screen effect
const gradient = ctx.createRadialGradient(
canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) * 0.3,
canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height) * 0.8
);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(1, 'rgba(0,0,0,0.7)');
ctx.fillStyle = gradient;
ctx.globalAlpha = 1;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Viewfinder Corner brackets
const bracketSize = Math.max(40, Math.min(canvas.width, canvas.height) * 0.15);
const margin = Math.max(20, Math.floor(canvas.width * 0.03));
ctx.globalAlpha = 0.9;
ctx.lineWidth = 3;
ctx.strokeStyle = color;
// Top-Left
ctx.beginPath(); ctx.moveTo(margin, margin + bracketSize); ctx.lineTo(margin, margin); ctx.lineTo(margin + bracketSize, margin); ctx.stroke();
// Top-Right
ctx.beginPath(); ctx.moveTo(canvas.width - margin - bracketSize, margin); ctx.lineTo(canvas.width - margin, margin); ctx.lineTo(canvas.width - margin, margin + bracketSize); ctx.stroke();
// Bottom-Left
ctx.beginPath(); ctx.moveTo(margin, canvas.height - margin - bracketSize); ctx.lineTo(margin, canvas.height - margin); ctx.lineTo(margin + bracketSize, canvas.height - margin); ctx.stroke();
// Bottom-Right
ctx.beginPath(); ctx.moveTo(canvas.width - margin - bracketSize, canvas.height - margin); ctx.lineTo(canvas.width - margin, canvas.height - margin); ctx.lineTo(canvas.width - margin, canvas.height - margin - bracketSize); ctx.stroke();
// Center Crosshair Target
const cx = canvas.width / 2;
const cy = canvas.height / 2;
ctx.beginPath();
ctx.moveTo(cx - 20, cy); ctx.lineTo(cx + 20, cy);
ctx.moveTo(cx, cy - 20); ctx.lineTo(cx, cy + 20);
ctx.stroke();
ctx.beginPath();
ctx.arc(cx, cy, 40, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.setLineDash([5, 10]);
ctx.arc(cx, cy, 60, 0, Math.PI * 2);
ctx.stroke();
ctx.setLineDash([]);
// Scanline & Glow
ctx.globalAlpha = 0.8;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(0, scanY);
ctx.lineTo(canvas.width, scanY);
ctx.lineWidth = 2;
ctx.stroke();
const scanGradient = ctx.createLinearGradient(0, scanY - 50, 0, Math.min(canvas.height, scanY + 50));
scanGradient.addColorStop(0, 'rgba(0,0,0,0)');
scanGradient.addColorStop(0.5, color);
scanGradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.globalAlpha = 0.3;
ctx.fillStyle = scanGradient;
ctx.fillRect(0, scanY - 50, canvas.width, 100);
// Random tech background text
const fontSize = Math.max(10, Math.floor(canvas.height * 0.015));
ctx.globalAlpha = 0.8;
ctx.fillStyle = color;
ctx.font = `${fontSize}px monospace`;
ctx.textAlign = 'left';
const linesOfText = Math.floor((canvas.height * 0.5) / (fontSize + 5));
for (let i = 0; i < linesOfText; i++) {
let hex = Math.floor(Math.random() * 16777215).toString(16).toUpperCase().padStart(6, '0');
ctx.fillText(`0x${hex} DATA_BLK_${i}`, margin + 10, margin + bracketSize + 20 + i * (fontSize + 5));
}
ctx.textAlign = 'right';
for (let i = 0; i < linesOfText; i++) {
let val = (Math.random() * 100).toFixed(3);
ctx.fillText(`SYS_CHK_${i}: ${val}%`, canvas.width - margin - 10, margin + bracketSize + 20 + i * (fontSize + 5));
}
// Movie Identifier Match Box
const boxW = Math.min(600, canvas.width - margin * 4);
const boxH = Math.max(80, Math.floor(canvas.height * 0.12));
const boxX = cx - boxW / 2;
const boxY = canvas.height - margin - boxH - 20;
// Match Box Background
ctx.globalAlpha = 0.85;
ctx.fillStyle = 'rgba(0, 10, 10, 0.8)';
ctx.fillRect(boxX, boxY, boxW, boxH);
// Match Box border
ctx.globalAlpha = 1;
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.strokeRect(boxX, boxY, boxW, boxH);
// Left vertical decoration strip in box
ctx.fillStyle = color;
ctx.fillRect(boxX, boxY, 15, boxH);
// Match Box Information
ctx.textAlign = 'left';
const titleSize = Math.floor(boxH * 0.2);
ctx.font = `bold ${titleSize}px monospace`;
ctx.fillText("SUBJECT IDENTIFICATION:", boxX + 30, boxY + boxH * 0.15);
const movieSize = Math.floor(boxH * 0.35);
ctx.font = `bold ${movieSize}px monospace`;
// Ensure movieName fits inside the box, truncate if too long
const maxTextWidth = boxW - 160;
let displayName = `MATCH: ${movieName}`;
if(ctx.measureText(displayName).width > maxTextWidth) {
let subName = displayName;
while(ctx.measureText(subName + "...").width > maxTextWidth && subName.length > 0) {
subName = subName.slice(0, -1);
}
displayName = subName + "...";
}
ctx.fillText(displayName, boxX + 30, boxY + boxH * 0.45);
// Barcode mock at bottom right of the Match Box
ctx.lineWidth = 1;
const barcodeStartX = boxX + boxW - 120;
for (let i = 0; i < 30; i++) {
let w = Math.random() * 3 + 1;
let x = barcodeStartX + i * 3.5;
if (x + w > boxX + boxW - 10) break;
ctx.fillRect(x, boxY + boxH * 0.15, w, boxH * 0.5);
}
// Timestamp
ctx.textAlign = 'right';
const dateSize = Math.floor(titleSize * 0.8);
ctx.font = `${dateSize}px monospace`;
const dateStr = new Date().toISOString().replace('T', ' ').substring(0, 19) + 'Z';
ctx.fillText(`SCAN D/T: ${dateStr}`, boxX + boxW - 15, boxY + boxH - dateSize - 10);
return canvas;
}Apply Changes
