You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, quote = "Волк слабее льва и тигра,\nно в цирке он не выступает. АУФ!", filterStyle = "meme", textScale = 6, showWolfWatermark = 1) {
const canvas = document.createElement('canvas');
const w = originalImg.width;
const h = originalImg.height;
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
// 1. Draw base image with "Sigma/Wolf" dramatic filter
if (filterStyle.toLowerCase() === "meme" || filterStyle.toLowerCase() === "dark") {
// Classic "Alpha Wolf" dark meme look
ctx.filter = 'grayscale(80%) contrast(120%) brightness(55%)';
} else if (filterStyle.toLowerCase() === "moon") {
// Moonlight / Nighttime blue-ish tint
ctx.filter = 'sepia(80%) hue-rotate(180deg) saturate(150%) brightness(70%)';
} else if (filterStyle.toLowerCase() === "blood") {
// Red, intense tint
ctx.filter = 'sepia(100%) hue-rotate(320deg) saturate(300%) contrast(120%) brightness(60%)';
}
ctx.drawImage(originalImg, 0, 0, w, h);
ctx.filter = 'none'; // Reset filter so graphics are unaffected
// 2. Add dramatic radial vignette for better text readability and atmosphere
const gradient = ctx.createRadialGradient(w / 2, h / 2, Math.min(w, h) * 0.2, w / 2, h / 2, Math.max(w, h) * 0.7);
gradient.addColorStop(0, 'rgba(0,0,0,0.1)');
gradient.addColorStop(1, 'rgba(0,0,0,0.85)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, w, h);
// 3. Draw background Wolf emoji watermark
if (Number(showWolfWatermark) === 1) {
ctx.save();
ctx.globalAlpha = 0.15;
const emojiSize = Math.min(w, h) * 0.5;
ctx.font = `${emojiSize}px Arial, sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('🐺', w / 2, h / 2);
ctx.restore();
}
// 4. Draw customizable Wolf Quote Text
if (quote && quote.trim() !== '') {
const scale = Number(textScale) > 0 ? Number(textScale) : 6;
const fontSize = Math.max(16, Math.floor(w * (scale / 100)));
ctx.font = `italic bold ${fontSize}px Impact, "Arial Black", sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000';
ctx.lineWidth = Math.max(2, fontSize * 0.12);
const maxWidth = w * 0.9;
// Handle explicit newlines gracefully (either actual newline or escaped \n)
const explicitLines = quote.replace(/\\n/g, '\n').split('\n').map(l => l.trim());
const lines = [];
// Wrap text algorithm
for (let eLine of explicitLines) {
const words = eLine.split(/\s+/);
let currentLine = '';
for (let n = 0; n < words.length; n++) {
const testLine = currentLine + words[n] + ' ';
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && n > 0) {
lines.push(currentLine.trim());
currentLine = words[n] + ' ';
} else {
currentLine = testLine;
}
}
if (currentLine.trim() !== "") {
lines.push(currentLine.trim());
}
}
const lineHeight = fontSize * 1.25;
const totalTextHeight = lines.length * lineHeight;
let startY = h - totalTextHeight - (h * 0.08); // Offset 8% from bottom
if (startY < 10) startY = 10;
// Setup text shadows
ctx.shadowColor = "black";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
// Draw the text lines
for (let i = 0; i < lines.length; i++) {
const y = startY + (i * lineHeight);
ctx.strokeText(lines[i], w / 2, y);
ctx.fillText(lines[i], w / 2, y);
}
// Reset shadows just in case
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}
return canvas;
}
Apply Changes