You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, bloomAmount = 10, warmthLevel = 40, showOpticalGlory = 1) {
const canvas = document.createElement('canvas');
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 1. Draw the original base image
ctx.drawImage(originalImg, 0, 0, width, height);
// "Другая Глория" (Alternative Gloria) Effect
// This effect creates a glowing, heavenly bloom (a visual "glory") combined with warm tones
// and an optional optical glory interference pattern (rainbow concentric rings).
// 2. Add Bloom (Soft heavenly glow)
ctx.globalCompositeOperation = 'screen';
ctx.filter = `blur(${bloomAmount}px)`;
ctx.globalAlpha = 0.6;
ctx.drawImage(originalImg, 0, 0, width, height);
// 3. Add Warmth / Angelic tint
ctx.globalCompositeOperation = 'overlay';
ctx.filter = 'none';
ctx.globalAlpha = parseInt(warmthLevel, 10) / 100;
ctx.fillStyle = '#ffcc66'; // Golden warm glow
ctx.fillRect(0, 0, width, height);
// 4. Vignette (Darken the edges slightly to focus on the center glow)
ctx.globalCompositeOperation = 'multiply';
ctx.globalAlpha = 0.8;
const vignetteGradient = ctx.createRadialGradient(
width / 2, height / 2, Math.min(width, height) * 0.2,
width / 2, height / 2, Math.min(width, height) * 0.8
);
vignetteGradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
vignetteGradient.addColorStop(1, 'rgba(160, 140, 120, 1)'); // Warm brownish edge
ctx.fillStyle = vignetteGradient;
ctx.fillRect(0, 0, width, height);
// 5. Optical Glory Phenomenon (Soft interference rainbow rings)
if (parseInt(showOpticalGlory, 10) === 1) {
ctx.globalCompositeOperation = 'screen';
ctx.globalAlpha = 0.25;
const gloryRadius = Math.min(width, height) * 0.4;
const gloryGradient = ctx.createRadialGradient(
width / 2, height / 2, 0,
width / 2, height / 2, gloryRadius
);
// Simulating the optical pattern of a glory (colored rings)
gloryGradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
gloryGradient.addColorStop(0.15, 'rgba(255, 255, 0, 0.6)');
gloryGradient.addColorStop(0.3, 'rgba(255, 0, 0, 0.5)');
gloryGradient.addColorStop(0.45, 'rgba(0, 255, 0, 0.4)');
gloryGradient.addColorStop(0.6, 'rgba(0, 0, 255, 0.3)');
gloryGradient.addColorStop(0.8, 'rgba(255, 0, 255, 0.15)');
gloryGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = gloryGradient;
ctx.beginPath();
ctx.arc(width / 2, height / 2, gloryRadius, 0, Math.PI * 2);
ctx.fill();
}
// Reset context properties to default
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1.0;
return canvas;
}
Apply Changes