You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, userName = "ДРУГ", goodnessScore = "100") {
// 1. Setup Canvas and Dimensions
const canvas = document.createElement("canvas");
const width = 500;
const height = 700;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
// 2. Draw Background Radial Gradient
const gradient = ctx.createRadialGradient(width / 2, height / 2, 50, width / 2, height / 2, height);
gradient.addColorStop(0, "#FFFFFF");
gradient.addColorStop(1, "#E1F5FE"); // Soft light blue for a 'goodness' theme
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
// 3. Helper Function: Draw Cartoonish Film Strip (Soyuzmultfilm style)
const drawFilmStrip = (x, y, w, h) => {
ctx.fillStyle = "#111"; // Dark charcoal
ctx.fillRect(x, y, w, h);
ctx.fillStyle = "#FFF"; // White holes
const boxSize = h * 0.4;
const spacing = boxSize * 2.2;
for (let i = 15; i < w; i += spacing) {
// Top rim hole
ctx.fillRect(i, y + h * 0.15, boxSize, boxSize * 0.6);
// Bottom rim hole
ctx.fillRect(i, y + h - (h * 0.15) - (boxSize * 0.6), boxSize, boxSize * 0.6);
}
};
// Draw Top & Bottom Film Strips
drawFilmStrip(0, 0, width, 50);
drawFilmStrip(0, height - 50, width, 50);
// 4. Draw Header Information / Titles
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// Text shadow to make the title pop
ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
ctx.shadowBlur = 3;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
// Colorful Gradient for "СОЮЗМУЛЬТФИЛЬМ"
const textGrad = ctx.createLinearGradient(100, 0, 400, 0);
textGrad.addColorStop(0, "#FFEB3B");
textGrad.addColorStop(0.2, "#FF9800");
textGrad.addColorStop(0.4, "#F44336");
textGrad.addColorStop(0.6, "#2196F3");
textGrad.addColorStop(0.8, "#4CAF50");
textGrad.addColorStop(1, "#9C27B0");
ctx.font = "bold 34px 'Comic Sans MS', cursive, sans-serif";
ctx.fillStyle = textGrad;
ctx.fillText("СОЮЗМУЛЬТФИЛЬМ", width / 2, 85);
// Clear shadow and add outline strokes to title
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.strokeStyle = "#FFFFFF";
ctx.lineWidth = 1.5;
ctx.strokeText("СОЮЗМУЛЬТФИЛЬМ", width / 2, 85);
// Subtitles
ctx.fillStyle = "#E91E63"; // Playful Pink
ctx.font = "bold 20px 'Comic Sans MS', cursive, sans-serif";
ctx.fillText("ПУТЕШЕСТВИЕ В МИР ДОБРА", width / 2, 120);
ctx.fillStyle = "#3F51B5"; // Playful Blue
ctx.font = "bold 16px 'Courier New', Courier, monospace";
ctx.fillText("Система: Сканер-Идентификатор", width / 2, 145);
// 5. Calculate and Draw Processed Image Avatar in Scanning Container
const px = 100;
const py = 170;
const size = 300;
// Draw rigid black border / frame for photo
ctx.fillStyle = "#000000";
ctx.fillRect(px - 4, py - 4, size + 8, size + 8);
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(px, py, size, size);
// Center crop to a perfect square to fit the scanner window proportions cleanly
const imgAspect = originalImg.width / originalImg.height;
let sWidth, sHeight, sx, sy;
if (imgAspect > 1) {
// Wider
sHeight = originalImg.height;
sWidth = originalImg.height;
sx = (originalImg.width - sWidth) / 2;
sy = 0;
} else {
// Taller or Square
sWidth = originalImg.width;
sHeight = originalImg.width;
sx = 0;
sy = (originalImg.height - sHeight) / 2;
}
// Put original image data on the canvas
ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, px, py, size, size);
// 6. Draw "Sci-Fi" Scanning Overlay
// Semi-transparent target grid overlay
ctx.strokeStyle = "rgba(0, 255, 0, 0.4)";
ctx.lineWidth = 1;
ctx.beginPath();
for (let i = 0; i <= size; i += 25) {
// Verticals
ctx.moveTo(px + i, py);
ctx.lineTo(px + i, py + size);
// Horizontals
ctx.moveTo(px, py + i);
ctx.lineTo(px + size, py + i);
}
ctx.stroke();
// Bold Targeting Corners
ctx.strokeStyle = "#00FF00";
ctx.lineWidth = 4;
const cLen = 25;
ctx.beginPath();
// Top-left
ctx.moveTo(px, py + cLen); ctx.lineTo(px, py); ctx.lineTo(px + cLen, py);
// Top-right
ctx.moveTo(px + size - cLen, py); ctx.lineTo(px + size, py); ctx.lineTo(px + size, py + cLen);
// Bottom-left
ctx.moveTo(px, py + size - cLen); ctx.lineTo(px, py + size); ctx.lineTo(px + cLen, py + size);
// Bottom-right
ctx.moveTo(px + size - cLen, py + size); ctx.lineTo(px + size, py + size); ctx.lineTo(px + size, py + size - cLen);
ctx.stroke();
// Laser Scan Horizontal Line Effect
const scanY = py + size * 0.65; // Static position looking like it's scanning dynamically
ctx.shadowColor = "#00FF00";
ctx.shadowBlur = 15;
ctx.fillStyle = "#00FF00";
ctx.fillRect(px, scanY, size, 4);
ctx.shadowBlur = 0; // Reset Shadow
// 7. Draw the Details Information Table Below Image
const startY = 495;
ctx.textAlign = "left";
ctx.font = "bold 20px 'Courier New', Courier, monospace";
ctx.fillStyle = "#333333";
ctx.fillText("СУБЪЕКТ: " + userName, px, startY);
ctx.fillText("СОСТОЯНИЕ: ИДЕНТИФИЦИРОВАН", px, startY + 30);
// Emphasized Goodness Level
ctx.fillStyle = "#4CAF50"; // Green color
ctx.fillText("УРОВЕНЬ ДОБРА: " + goodnessScore + "%", px, startY + 60);
// 8. Draw Futuristic "ID" Barcode Area
ctx.fillStyle = "#000000";
const bcY = startY + 80;
// Generate deterministic pseudo-random thickness lines for a barcode effect
for (let i = 0; i < 180; i += 4) {
const bw = (Math.sin(i * 1.7) + 1.5) * 1.3;
ctx.fillRect(px + i, bcY, bw, 35);
}
// Barcode number text
ctx.font = "bold 14px 'Courier New', Courier, monospace";
ctx.fillText("ID: SM-ОДОБРЕНО-" + goodnessScore, px + 10, bcY + 48);
// 9. Playful Quality Control Seal / Stamp
ctx.save();
ctx.translate(px + 230, startY + 45); // Offset to bottom right of text
ctx.rotate(-Math.PI / 10); // Tilt
ctx.strokeStyle = "#E91E63"; // Match Pinkish Red
ctx.lineWidth = 3;
// Circle rings
ctx.beginPath(); ctx.arc(0, 0, 42, 0, Math.PI * 2); ctx.stroke();
ctx.beginPath(); ctx.arc(0, 0, 36, 0, Math.PI * 2); ctx.stroke();
// Stamp Words
ctx.fillStyle = "#E91E63";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "bold 14px Arial, sans-serif";
ctx.fillText("ПРОВЕРКА", 0, -12);
ctx.fillText("ПРОЙДЕНА", 0, 0);
ctx.fillText("100%", 0, 14);
ctx.restore();
// 10. Return completed generated Canvas Element
return canvas;
}Apply Changes
