function processImage(originalImg, redMultiplier = 1, greenMultiplier = 1, blueMultiplier = 1, opacity = 1, redOffset = 0, greenOffset = 0, blueOffset = 0) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the original image
canvas.width = originalImg.naturalWidth || originalImg.width;
canvas.height = originalImg.naturalHeight || originalImg.height;
// Draw the image onto the canvas
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// Retrieve image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Ensure inputs are parsed as floats (in case strings are passed)
const rMult = parseFloat(redMultiplier);
const gMult = parseFloat(greenMultiplier);
const bMult = parseFloat(blueMultiplier);
const aMult = parseFloat(opacity);
const rOff = parseFloat(redOffset);
const gOff = parseFloat(greenOffset);
const bOff = parseFloat(blueOffset);
// Iterate over all pixels and adjust color/opacity
// Note: data is a Uint8ClampedArray, meaning it will automatically clamp values between 0 and 255
for (let i = 0; i < data.length; i += 4) {
data[i] = data[i] * rMult + rOff; // Red
data[i + 1] = data[i + 1] * gMult + gOff; // Green
data[i + 2] = data[i + 2] * bMult + bOff; // Blue
data[i + 3] = data[i + 3] * aMult; // Alpha (Opacity)
}
// Put the processed image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
return canvas;
}This tool allows you to fine-tune the visual properties of an image by adjusting its color channels and transparency. You can modify the red, green, and blue levels using both multipliers for scaling intensity and offsets for shifting color balance, as well as adjust the overall opacity. This is useful for tasks such as color grading, correcting color casts, creating watermarks, or preparing images for layered graphic design compositions.