Please bookmark this page to avoid losing your image tool!

Image Problem Resolution Assistance

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * Adds a meme-style Russian text caption to an image.
 * The text is a rhyming couplet: "Если проблема мешает жить, Мастеру Вите пора звонить!"
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} [fontColor='#FFFFFF'] The color of the text.
 * @param {string} [strokeColor='#000000'] The color of the text outline.
 * @param {string} [fontFamily='Impact, Arial Black, sans-serif'] The font family for the text.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text drawn on it.
 */
function processImage(originalImg, fontColor = '#FFFFFF', strokeColor = '#000000', fontFamily = 'Impact, Arial Black, sans-serif') {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // --- Prepare Text ---
    const line1 = 'Если проблема мешает жить,';
    const line2 = 'Мастеру Вите пора звонить!';

    // --- Auto-size Font ---
    // Start with a large font size and decrease until the text fits
    let fontSize = Math.floor(width / 10);
    const padding = width * 0.05; // 5% horizontal padding
    const maxWidth = width - (padding * 2);

    // Function to measure text width for a given font size
    const measureTextWidth = (text, size) => {
        ctx.font = `bold ${size}px ${fontFamily}`;
        return ctx.measureText(text).width;
    };

    // Determine which line is longer to base our font size on it
    // Check initial width with a dummy font setting
    ctx.font = `bold ${fontSize}px ${fontFamily}`;
    const longerLine = ctx.measureText(line1).width > ctx.measureText(line2).width ? line1 : line2;

    // Reduce font size until the longest line fits within the max width
    while (measureTextWidth(longerLine, fontSize) > maxWidth && fontSize > 10) {
        fontSize--;
    }

    // --- Apply Final Text Style ---
    ctx.font = `bold ${fontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.textAlign = 'center';
    // Stroke width scales with font size for a consistent look
    ctx.lineWidth = Math.max(1, Math.floor(fontSize / 15));

    // --- Draw Top Text ---
    const x1 = width / 2;
    const y1 = height * 0.05; // Position 5% from the top
    ctx.textBaseline = 'top';
    // Draw stroke (outline) then fill
    ctx.strokeText(line1, x1, y1);
    ctx.fillText(line1, x1, y1);

    // --- Draw Bottom Text ---
    const x2 = width / 2;
    const y2 = height * 0.95; // Position 5% from the bottom
    ctx.textBaseline = 'bottom';
    // Draw stroke (outline) then fill
    ctx.strokeText(line2, x2, y2);
    ctx.fillText(line2, x2, y2);

    // Return the final canvas element
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Problem Resolution Assistance tool allows users to add a meme-style Russian text caption to their images. The tool uses a rhyming couplet as the caption, which is visually displayed on the image. This can be useful for creating humorous or cultural memes, enhancing social media posts, or adding a personalized touch to images shared in various contexts. Users can customize the font color, stroke color, and font family for the text, making it adaptable for different styles and preferences.

Leave a Reply

Your email address will not be published. Required fields are marked *