You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, mirrorMode = "none", tintIntensity = 1.0, contrastLevel = 60) {
// Create the main canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the original image
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0, width, height);
// Extract pixel data for manipulation
const imgData = ctx.getImageData(0, 0, width, height);
const data = imgData.data;
// Prepare variables for the "Major" effect (typically inverted colors, tinted red/orange, high contrast)
const intensity = parseFloat(tintIntensity) || 1.0;
const cLevel = Math.max(-255, Math.min(254, parseFloat(contrastLevel) || 60));
const contrastFactor = (259 * (cLevel + 255)) / (255 * (259 - cLevel));
// Apply the "G-Major" visual effect
for (let i = 0; i < data.length; i += 4) {
// 1. Invert colors (Negative)
let r = 255 - data[i];
let g = 255 - data[i + 1];
let b = 255 - data[i + 2];
// 2. Apply reddish/yellowish tint (characteristic of the Major video meme effect)
if (intensity > 0) {
r = r + ((255 - r) * 0.35 * intensity);
g = g + ((255 - g) * 0.10 * intensity); // Slight green push for a yellowish/orange hue
b = b - (b * 0.45 * intensity); // Reduce blue
}
// 3. Apply High Contrast
r = contrastFactor * (r - 128) + 128;
g = contrastFactor * (g - 128) + 128;
b = contrastFactor * (b - 128) + 128;
// 4. Clamp values between 0 and 255 and assign back to the image data
data[i] = Math.max(0, Math.min(255, r));
data[i + 1] = Math.max(0, Math.min(255, g));
data[i + 2] = Math.max(0, Math.min(255, b));
}
// Put the processed visual data back onto the canvas
ctx.putImageData(imgData, 0, 0);
// Apply optional mirroring (very popular in meme / YouTube Poop effects)
mirrorMode = mirrorMode.toLowerCase().trim();
if (mirrorMode !== "none") {
// Use a temporary canvas to hold the filtered image for copying
const tempCanvas = document.createElement('canvas');
tempCanvas.width = width;
tempCanvas.height = height;
const tCtx = tempCanvas.getContext('2d');
tCtx.drawImage(canvas, 0, 0);
ctx.clearRect(0, 0, width, height);
if (mirrorMode === "left") {
// Keep left half, mirror it to the right
ctx.drawImage(tempCanvas, 0, 0, width / 2, height, 0, 0, width / 2, height);
ctx.save();
ctx.translate(width, 0);
ctx.scale(-1, 1);
ctx.drawImage(tempCanvas, 0, 0, width / 2, height, 0, 0, width / 2, height);
ctx.restore();
}
else if (mirrorMode === "right") {
// Keep right half, mirror it to the left
ctx.drawImage(tempCanvas, width / 2, 0, width / 2, height, width / 2, 0, width / 2, height);
ctx.save();
ctx.translate(width, 0);
ctx.scale(-1, 1);
ctx.drawImage(tempCanvas, width / 2, 0, width / 2, height, width / 2, 0, width / 2, height);
ctx.restore();
}
else if (mirrorMode === "top") {
// Keep top half, mirror it to the bottom
ctx.drawImage(tempCanvas, 0, 0, width, height / 2, 0, 0, width, height / 2);
ctx.save();
ctx.translate(0, height);
ctx.scale(1, -1);
ctx.drawImage(tempCanvas, 0, 0, width, height / 2, 0, 0, width, height / 2);
ctx.restore();
}
else if (mirrorMode === "bottom") {
// Keep bottom half, mirror it to the top
ctx.drawImage(tempCanvas, 0, height / 2, width, height / 2, 0, height / 2, width, height / 2);
ctx.save();
ctx.translate(0, height);
ctx.scale(1, -1);
ctx.drawImage(tempCanvas, 0, height / 2, width, height / 2, 0, height / 2, width, height / 2);
ctx.restore();
} else {
// Fallback if an unrecognized mirror mode is passed
ctx.drawImage(tempCanvas, 0, 0);
}
}
return canvas;
}
Apply Changes