You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, intensity = 0.8, glowAmount = 8) {
// Validate and parse parameters
intensity = Math.max(0, Math.min(Number(intensity), 2));
glowAmount = Math.max(0, Number(glowAmount));
// Create the main canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// 1. Draw base with color adjustments (brightness, contrast, saturation, and a slight warm sepia tone)
const brightness = 100 + (5 * intensity);
const contrast = 100 + (10 * intensity);
const saturate = 100 + (15 * intensity);
const sepia = 15 * intensity;
ctx.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturate}%) sepia(${sepia}%)`;
ctx.drawImage(originalImg, 0, 0);
ctx.filter = 'none'; // Reset filter
// 2. Soft dreamy glow via blurred screen overlay (Soft focus effect)
if (glowAmount > 0 && intensity > 0) {
const glowCanvas = document.createElement('canvas');
const glowCtx = glowCanvas.getContext('2d');
glowCanvas.width = canvas.width;
glowCanvas.height = canvas.height;
glowCtx.filter = `blur(${glowAmount}px)`;
glowCtx.drawImage(originalImg, 0, 0);
ctx.globalAlpha = 0.35 * Math.min(intensity, 1);
ctx.globalCompositeOperation = 'screen';
ctx.drawImage(glowCanvas, 0, 0);
}
// 3. Romantic pinkish-warm tint overlay to give a romantic "rose-tinted" feel
if (intensity > 0) {
ctx.globalAlpha = 0.25 * Math.min(intensity, 1);
ctx.globalCompositeOperation = 'overlay';
ctx.fillStyle = '#ff6b81'; // Warm pink / Watermelon pink
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// 4. Subtle, dramatic vignette to frame the image and draw focus to the center
if (intensity > 0) {
const gradient = ctx.createRadialGradient(
canvas.width / 2, canvas.height / 2, 0,
canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height) * 0.7
);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(0.4, 'rgba(30, 0, 10, 0)');
gradient.addColorStop(1, `rgba(50, 0, 20, ${0.45 * Math.min(intensity, 1)})`); // Dark reddish shadows
ctx.globalAlpha = 1.0;
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Reset composite operation to normal
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1.0;
return canvas;
}
Apply Changes