You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, caseTitle = "Дело о Драконе и Георгии", caseStatus = "СОВЕРШЕННО СЕКРЕТНО", filterIntensity = "0.8") {
// Create a new canvas to perform the image manipulation
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions equal to the original image dimensions
const w = originalImg.width;
const h = originalImg.height;
canvas.width = w;
canvas.height = h;
// Apply a dossier / old photo style filter
const intensity = Number(filterIntensity);
ctx.filter = `sepia(${intensity}) grayscale(${intensity * 0.5}) contrast(1.2) brightness(0.9)`;
ctx.drawImage(originalImg, 0, 0, w, h);
ctx.filter = 'none';
// Draw dark photo-corner mounts to simulate a dossier file
ctx.fillStyle = '#1a1a1a';
const mountSize = Math.max(15, w * 0.05);
const drawMount = (x, y, rot) => {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(mountSize, 0);
ctx.lineTo(0, mountSize);
ctx.fill();
ctx.restore();
};
// Corner mounts
drawMount(0, 0, 0); // Top-Left
drawMount(w, 0, Math.PI / 2); // Top-Right
drawMount(w, h, Math.PI); // Bottom-Right
drawMount(0, h, -Math.PI / 2); // Bottom-Left
// Create a dark gradient at the bottom for text readability
const grad = ctx.createLinearGradient(0, h * 0.6, 0, h);
grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
grad.addColorStop(1, 'rgba(0, 0, 0, 0.9)');
ctx.fillStyle = grad;
ctx.fillRect(0, h * 0.6, w, h * 0.4);
// Setup typography for the case file title (Typewriter aesthetic)
const fontSize = Math.max(20, Math.floor(w * 0.055));
ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#F4ECD8'; // Aged paper color
ctx.shadowColor = '#000000';
ctx.shadowBlur = Math.max(4, Math.floor(w * 0.01));
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
// Draw main case title
ctx.fillText(caseTitle, w / 2, h - h * 0.15, w * 0.9);
// Draw subtitle with subjects / emojis (Dragon & George represented as Shield and Dragon)
const subFontSize = Math.max(16, Math.floor(w * 0.035));
ctx.font = `${subFontSize}px "Courier New", Courier, monospace`;
ctx.fillStyle = '#CCCCCC';
ctx.fillText("Объекты в деле: 🛡️ Георгий, 🐉 Дракон", w / 2, h - h * 0.06, w * 0.9);
// Render a "TOP SECRET" red ink authentic-looking stamp
ctx.save();
const stampSize = Math.max(24, Math.floor(w * 0.07));
// Position stamp dynamically in the top left quadrant
ctx.translate(w * 0.25, h * 0.15);
ctx.rotate(-0.15); // Slight tilt
// Global alpha for a slightly faded ink look
ctx.globalAlpha = 0.85;
// Stamp borders
ctx.strokeStyle = '#c81e1e';
ctx.lineWidth = Math.max(3, stampSize * 0.08);
// Double border styling
ctx.strokeRect(-stampSize * 3, -stampSize, stampSize * 6, stampSize * 2);
ctx.lineWidth = Math.max(1, stampSize * 0.03);
ctx.strokeRect(-stampSize * 2.9, -stampSize * 0.9, stampSize * 5.8, stampSize * 1.8);
// Stamp text
ctx.font = `bold ${stampSize}px Impact, "Arial Black", sans-serif`;
ctx.fillStyle = '#c81e1e';
ctx.textAlign = 'center';
ctx.shadowColor = 'transparent';
ctx.fillText(caseStatus, 0, stampSize * 0.35, stampSize * 5.6);
ctx.restore();
return canvas;
}
Apply Changes