You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, filterType = "clarendon") {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Get image dimensions. It's crucial that originalImg is fully loaded.
// The caller should ensure this, e.g., by using originalImg.onload.
const w = originalImg.naturalWidth;
const h = originalImg.naturalHeight;
if (!originalImg.complete || w === 0 || h === 0) {
console.error("Image is not loaded, is invalid, or has zero dimensions. Displaying error canvas.");
// Fallback: Set a default size and draw an error message.
canvas.width = 300; // Default error canvas width
canvas.height = 150; // Default error canvas height
ctx.fillStyle = "#f0f0f0"; // Light gray background
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.font = "14px Arial";
ctx.fillText("Error: Image not loaded", canvas.width / 2, canvas.height / 2 - 10);
ctx.fillText("or has invalid dimensions.", canvas.width / 2, canvas.height / 2 + 10);
return canvas;
}
canvas.width = w;
canvas.height = h;
let filterString = 'none';
switch (filterType.toLowerCase()) {
case 'none':
filterString = 'none';
break;
case 'clarendon': // Enhances shadows and highlights, boosts saturation
filterString = 'contrast(1.2) saturate(1.35)';
break;
case 'gingham': // Vintage, washed-out look with a slight warm tint
filterString = 'brightness(1.05) contrast(0.94) hue-rotate(-10deg)';
break;
case 'moon': // B&W, moody, high contrast
filterString = 'grayscale(1) contrast(1.1) brightness(1.1)';
break;
case 'lark': // Brightens, enhances blues/greens (simplified)
filterString = 'brightness(1.1) contrast(0.9) saturate(1.1)';
break;
case 'reyes': // Dusty, vintage, desaturated warm look
filterString = 'sepia(0.4) brightness(1.1) contrast(0.85) saturate(0.75)';
break;
case 'juno': // Pops whites, warms highlights, enhances vibrance
filterString = 'contrast(1.15) brightness(1.05) saturate(1.35) sepia(0.2) hue-rotate(-10deg)';
break;
case 'slumber': // Desaturated, hazy, retro, dreamy
filterString = 'saturate(0.60) brightness(1.05) contrast(0.9)';
break;
case 'crema': // Creamy, warm, smoothing
filterString = 'sepia(0.35) contrast(1.12) brightness(1.1) saturate(0.95) hue-rotate(-3deg)';
break;
case 'ludwig': // Desaturates most colors but enhances reds (simplified)
filterString = 'brightness(1.1) saturate(1.8) contrast(0.9) sepia(0.15)';
break;
case 'aden': // Low contrast, soft, pastel-like, slight vintage feel
filterString = 'hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2)';
break;
case 'perpetua': // Pastel tones, prominent blues/greens (simplified)
filterString = 'contrast(1.1) brightness(1.15) saturate(1.2)';
break;
case 'amaro': // Adds light (simplified, actual Amaro has complex center lighting)
filterString = 'hue-rotate(-10deg) contrast(0.9) brightness(1.15) saturate(1.5)';
break;
case 'mayfair': // Warm pink tone, bright center (simplified, lacks vignette and specific overlay)
filterString = 'contrast(1.1) saturate(1.15) brightness(1.05)';
break;
case 'rise': // Soft light, golden glow (simplified, lacks specific overlay)
filterString = 'brightness(1.1) sepia(0.25) contrast(0.9) saturate(0.9)';
break;
case 'hudson': // Cool, icy look (simplified, lacks strong vignette)
filterString = 'brightness(1.2) contrast(0.95) saturate(1.1) sepia(0.1) hue-rotate(5deg)';
break;
case 'valencia': // Faded, vintage, warm colors
filterString = 'contrast(1.1) brightness(1.1) sepia(0.1)';
break;
case 'xpro2': // High contrast, saturated colors, golden tones (simplified, lacks strong vignette)
filterString = 'sepia(0.3) saturate(1.8) contrast(1.45) brightness(0.85) hue-rotate(-5deg)';
break;
case 'sierra': // Faded, soft look (simplified, lacks vignette)
filterString = 'sepia(0.25) contrast(1.2) brightness(0.9) hue-rotate(-15deg)';
break;
case 'willow': // Monochrome with_soft purplish tones (simplified to grayscale with adjustments)
filterString = 'grayscale(0.8) contrast(0.95) brightness(0.9)';
break;
case 'lofi': // Enriches color, strong shadows, high saturation & contrast
filterString = 'saturate(1.2) contrast(1.5) brightness(0.95)';
break;
case 'inkwell': // Classic B&W, slight nostalgic feel
filterString = 'grayscale(1) sepia(0.15) contrast(1.15) brightness(1.15)';
break;
case 'hefe': // High contrast and saturation, warm tint (simplified, lacks vignette)
filterString = 'contrast(1.2) saturate(1.4) sepia(0.15) brightness(0.95) hue-rotate(-3deg)';
break;
case 'nashville': // Warm, nostalgic filter with a pinkish hue (simplified, lacks complex overlays)
filterString = 'sepia(0.25) contrast(1.2) brightness(1.05) saturate(1.2) hue-rotate(-5deg)';
break;
// Adding some basic utility filters for flexibility
case 'grayscale':
filterString = 'grayscale(1)';
break;
case 'sepia_tone':
filterString = 'sepia(1)';
break;
case 'invert_colors':
filterString = 'invert(1)';
break;
case 'boost_saturation':
filterString = 'saturate(2.5)'; // Example: very high saturation
break;
case 'high_contrast':
filterString = 'contrast(1.8)'; // Example: high contrast
break;
case 'increase_brightness':
filterString = 'brightness(1.3)'; // Example: increased brightness
break;
default:
console.warn(`Unknown filterType: "${filterType}". Applying default filter 'clarendon'.`);
filterString = 'contrast(1.2) saturate(1.35)'; // Fallback to default 'clarendon'
}
ctx.filter = filterString;
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// It's good practice to reset the filter if the context object is to be reused elsewhere,
// but since we create a new canvas and context for each call, and return the canvas,
// it's not strictly necessary for this specific function's lifecycle.
// ctx.filter = 'none';
return canvas;
}Apply Changes
