You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, topText = "ПОХИТИТЕЛИ", bottomText = "ЯГОД", stealBerries = "0", vignetteIntensity = "0.3") {
const canvas = document.createElement('canvas');
canvas.width = originalImg.naturalWidth || originalImg.width;
canvas.height = originalImg.naturalHeight || originalImg.height;
// willReadFrequently is set for better performance if pixel manipulation is used
const ctx = canvas.getContext('2d', { willReadFrequently: true });
// Draw the original image
ctx.drawImage(originalImg, 0, 0);
// Easter Egg: Literally "steal the berries" by desaturating prominent red colors
if (stealBerries === "1") {
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// Check if the pixel is prominently red
if (r > g * 1.3 && r > b * 1.3 && r > 90) {
// Desaturate the red pixel (stealing the berry color)
const gray = (g + b) / 2;
data[i] = gray; // R
data[i+1] = gray; // G
data[i+2] = gray; // B
}
}
ctx.putImageData(imgData, 0, 0);
}
// Apply a subtle dramatic vignette (thief atmosphere)
const vIntensity = parseFloat(vignetteIntensity);
if (vIntensity > 0) {
const gradient = ctx.createRadialGradient(
canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) * 0.2,
canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height) * 0.8
);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(1, `rgba(0,0,0,${vIntensity})`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Function to draw standard impact meme text correctly scaled
const drawText = (text, isTop) => {
if (!text || text.trim() === "") return;
const textStr = String(text).toUpperCase();
let size = canvas.height * 0.15;
ctx.textAlign = 'center';
ctx.lineJoin = 'round';
// Scale down the font until it fits within 95% of the canvas width
do {
ctx.font = `bold ${size}px Impact, "Arial Black", sans-serif`;
size -= 2;
} while (ctx.measureText(textStr).width > canvas.width * 0.95 && size > 10);
ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000';
ctx.lineWidth = Math.max(size / 15, 2);
const x = canvas.width / 2;
const y = isTop ? canvas.height * 0.05 : canvas.height * 0.95;
ctx.textBaseline = isTop ? 'top' : 'bottom';
// Draw outline then fill
ctx.strokeText(textStr, x, y);
ctx.fillText(textStr, x, y);
};
// Draw the meme texts
drawText(topText, true);
drawText(bottomText, false);
return canvas;
}
Apply Changes