function processImage(originalImg, brightness = 0, contrast = 0) {
const canvas = document.createElement('canvas');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0);
const bValue = Number(brightness) || 0;
const cValue = Number(contrast) || 0;
// If no adjustments are needed, return early
if (bValue === 0 && cValue === 0) {
return canvas;
}
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Map brightness and contrast from range [-100, 100] to [-255, 255].
// Contrast is clamped to avoid dividing by close-to-zero at higher limits.
const safeCValue = Math.max(-100, Math.min(100, cValue));
const b = (bValue / 100) * 255;
const c = (safeCValue / 100) * 255;
// Contrast correction factor formula
const factor = (259 * (c + 255)) / (255 * (259 - c));
for (let i = 0; i < data.length; i += 4) {
// Apply Brightness
let r = data[i] + b;
let g = data[i + 1] + b;
let blue = data[i + 2] + b;
// Apply Contrast
r = factor * (r - 128) + 128;
g = factor * (g - 128) + 128;
blue = factor * (blue - 128) + 128;
// Clamp RGB values and assign back
data[i] = r < 0 ? 0 : r > 255 ? 255 : r;
data[i + 1] = g < 0 ? 0 : g > 255 ? 255 : g;
data[i + 2] = blue < 0 ? 0 : blue > 255 ? 255 : blue;
// data[i+3] is Alpha, which remains unchanged
}
ctx.putImageData(imageData, 0, 0);
return canvas;
}The Image Brightness and Contrast Adjuster allows you to modify the visual properties of your images by fine-tuning their brightness and contrast levels. This tool is useful for correcting underexposed or overexposed photos, enhancing the clarity of dull images, or preparing visual content for different display environments.