You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
scanColor = "#00ffcc",
topText = "Студии Кино Версии",
bottomText = "Компания Года: Нового Проект Сканер",
filmStripEffect = 1
) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
// Background to avoid transparent issues
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, width, height);
// Calculate image dimensions if filmstrip effect is active
let imgDrawX = 0;
let imgDrawY = 0;
let imgDrawWidth = width;
let imgDrawHeight = height;
const marginX = width * 0.05; // Filmstrip margin
if (filmStripEffect === 1) {
imgDrawX = marginX * 2;
imgDrawWidth = width - (marginX * 4);
}
// Draw the main image
ctx.drawImage(originalImg, imgDrawX, imgDrawY, imgDrawWidth, imgDrawHeight);
// Apply a slightly darker, contrasting "Scanner" overlay tint
ctx.fillStyle = 'rgba(0, 20, 30, 0.25)';
ctx.fillRect(imgDrawX, imgDrawY, imgDrawWidth, imgDrawHeight);
// Draw horizontal scanlines
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
for (let y = 0; y < imgDrawHeight; y += 4) {
ctx.fillRect(imgDrawX, imgDrawY + y, imgDrawWidth, 1);
}
// Add Vignette on the image area
const gradient = ctx.createRadialGradient(
imgDrawX + imgDrawWidth / 2, imgDrawY + imgDrawHeight / 2, imgDrawWidth / 4,
imgDrawX + imgDrawWidth / 2, imgDrawY + imgDrawHeight / 2, imgDrawWidth
);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(1, 'rgba(0,0,0,0.7)');
ctx.fillStyle = gradient;
ctx.fillRect(imgDrawX, imgDrawY, imgDrawWidth, imgDrawHeight);
if (filmStripEffect === 1) {
// Draw Movie Studio Filmstrip Edges
ctx.fillStyle = '#111111';
ctx.fillRect(0, 0, marginX * 2, height);
ctx.fillRect(width - marginX * 2, 0, marginX * 2, height);
ctx.fillStyle = '#eeeeee';
const holeWidth = Math.max(4, width * 0.015);
const holeHeight = Math.max(6, height * 0.012);
const holeSpacing = holeHeight * 2.5;
for (let y = holeSpacing; y < height - holeSpacing; y += holeSpacing) {
// Left sprocket holes
ctx.fillRect(marginX - holeWidth / 2, y, holeWidth, holeHeight);
// Right sprocket holes
ctx.fillRect(width - marginX - holeWidth / 2, y, holeWidth, holeHeight);
}
}
// Draw Scanner Bar / Laser Line
const scanY = height * 0.65; // Position the scanner at 65% height
ctx.save();
ctx.shadowColor = scanColor;
ctx.shadowBlur = width * 0.02;
ctx.fillStyle = scanColor;
// Core beam
ctx.fillRect(imgDrawX, scanY, imgDrawWidth, Math.max(2, height * 0.005));
// Glowing beam center
ctx.fillStyle = '#ffffff';
ctx.fillRect(imgDrawX + imgDrawWidth * 0.1, scanY + 1, imgDrawWidth * 0.8, Math.max(1, height * 0.002));
ctx.restore();
// Draw Scanner Target / Reticle
const reticleSize = Math.min(imgDrawWidth, imgDrawHeight) * 0.15;
const centerX = imgDrawX + imgDrawWidth / 2;
const centerY = imgDrawY + imgDrawHeight / 2;
ctx.strokeStyle = scanColor;
ctx.lineWidth = Math.max(1, width * 0.003);
ctx.globalAlpha = 0.6;
// Outer circle
ctx.beginPath();
ctx.arc(centerX, centerY, reticleSize, 0, Math.PI * 2);
ctx.stroke();
// Reticle crosshairs
const crosshairLength = reticleSize * 0.3;
ctx.beginPath();
ctx.moveTo(centerX - reticleSize, centerY);
ctx.lineTo(centerX - reticleSize + crosshairLength, centerY);
ctx.moveTo(centerX + reticleSize, centerY);
ctx.lineTo(centerX + reticleSize - crosshairLength, centerY);
ctx.moveTo(centerX, centerY - reticleSize);
ctx.lineTo(centerX, centerY - reticleSize + crosshairLength);
ctx.moveTo(centerX, centerY + reticleSize);
ctx.lineTo(centerX, centerY + reticleSize - crosshairLength);
ctx.stroke();
ctx.globalAlpha = 1.0;
// Corner HUD brackets
const bracketLen = reticleSize * 0.5;
const padding = imgDrawWidth * 0.05;
ctx.beginPath();
ctx.lineWidth = Math.max(2, width * 0.004);
// Top Left
ctx.moveTo(imgDrawX + padding + bracketLen, imgDrawY + padding);
ctx.lineTo(imgDrawX + padding, imgDrawY + padding);
ctx.lineTo(imgDrawX + padding, imgDrawY + padding + bracketLen);
// Top Right
ctx.moveTo(imgDrawX + imgDrawWidth - padding - bracketLen, imgDrawY + padding);
ctx.lineTo(imgDrawX + imgDrawWidth - padding, imgDrawY + padding);
ctx.lineTo(imgDrawX + imgDrawWidth - padding, imgDrawY + padding + bracketLen);
// Bottom Left
ctx.moveTo(imgDrawX + padding + bracketLen, imgDrawY + imgDrawHeight - padding);
ctx.lineTo(imgDrawX + padding, imgDrawY + imgDrawHeight - padding);
ctx.lineTo(imgDrawX + padding, imgDrawY + imgDrawHeight - padding - bracketLen);
// Bottom Right
ctx.moveTo(imgDrawX + imgDrawWidth - padding - bracketLen, imgDrawY + imgDrawHeight - padding);
ctx.lineTo(imgDrawX + imgDrawWidth - padding, imgDrawY + imgDrawHeight - padding);
ctx.lineTo(imgDrawX + imgDrawWidth - padding, imgDrawY + imgDrawHeight - padding - bracketLen);
ctx.stroke();
// Texts Layer (Scanner / Movie Studio Info)
const fontSize = Math.max(12, Math.floor(imgDrawHeight * 0.035));
ctx.font = `bold ${fontSize}px monospace`;
ctx.fillStyle = scanColor;
ctx.shadowColor = scanColor;
ctx.shadowBlur = 5;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(topText.toUpperCase(), imgDrawX + padding + 10, imgDrawY + padding + 10);
ctx.textBaseline = 'bottom';
ctx.fillText(bottomText.toUpperCase(), imgDrawX + padding + 10, imgDrawY + imgDrawHeight - padding - 10);
ctx.textAlign = 'right';
ctx.textBaseline = 'top';
ctx.fillText("SCAN://ACTIVE", imgDrawX + imgDrawWidth - padding - 10, imgDrawY + padding + 10);
ctx.fillText(`SEQ: ${Math.floor(Math.random() * 8999 + 1000)}`, imgDrawX + imgDrawWidth - padding - 10, imgDrawY + padding + 10 + fontSize * 1.2);
return canvas;
}Apply Changes
