Please bookmark this page to avoid losing your image tool!

Image Reward Generator

(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.
function processImage(
    originalImg,
    title = 'WANTED',
    rewardText = 'REWARD',
    amountText = '$500,000',
    footerText = 'DEAD OR ALIVE',
    vintageFilter = 1
) {
    // Standard canvas dimensions for a wanted poster
    const width = 800;
    const height = 1000;

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Draw vintage parchment background
    const cx = width / 2;
    const cy = height / 2;
    const gradient = ctx.createRadialGradient(cx, cy, 100, cx, cy, width);
    gradient.addColorStop(0, '#FFF3D6'); // Lighter center
    gradient.addColorStop(0.7, '#E4C792');
    gradient.addColorStop(1, '#C79A54'); // Darker, scorched-looking edges
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 2. Draw poster border limits
    const textColor = '#2c1e0f'; // Dark brownish-black for ink
    ctx.strokeStyle = textColor;
    
    // Outer thick border
    ctx.lineWidth = 12;
    ctx.strokeRect(35, 35, width - 70, height - 70);
    // Inner thin border
    ctx.lineWidth = 3;
    ctx.strokeRect(55, 55, width - 110, height - 110);

    // 3. Typography setup
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    const fontStack = '"Times New Roman", Times, serif';

    // Top Title (WANTED)
    ctx.font = `bold 130px ${fontStack}`;
    ctx.fillText(title, width / 2, 70, width - 130);

    // 4. Draw the original image with clipping and filter
    const imgX = 120;
    const imgY = 230;
    const imgW = 560;
    const imgH = 440;

    // Calculate crop to cover the bounding box
    const imgAspect = originalImg.width / originalImg.height;
    const boxAspect = imgW / imgH;
    let sWidth = originalImg.width;
    let sHeight = originalImg.height;
    let sx = 0, sy = 0;

    if (imgAspect > boxAspect) {
        sWidth = sHeight * boxAspect;
        sx = (originalImg.width - sWidth) / 2;
    } else {
        sHeight = sWidth / boxAspect;
        sy = (originalImg.height - sHeight) / 2;
    }

    ctx.save();
    // Apply vintage Sepia/Grayscale filter if requested
    if (Number(vintageFilter) === 1) {
        ctx.filter = 'sepia(0.75) contrast(1.3) grayscale(0.4) brightness(0.9)';
    }
    
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, imgX, imgY, imgW, imgH);
    ctx.restore();

    // 5. Draw a frame over the image
    ctx.lineWidth = 6;
    ctx.strokeRect(imgX, imgY, imgW, imgH);
    
    // Inner frame detail
    ctx.lineWidth = 2;
    ctx.strokeRect(imgX - 8, imgY - 8, imgW + 16, imgH + 16);

    // 6. Draw Bottom Texts
    // Reward Label
    ctx.font = `bold 65px ${fontStack}`;
    ctx.fillText(rewardText, width / 2, 700, width - 130);

    // Amount Text
    ctx.font = `bold 100px ${fontStack}`;
    ctx.fillText(amountText, width / 2, 770, width - 130);

    // Footer Text
    ctx.font = `bold 45px ${fontStack}`;
    
    // Add small decorative stars around footer
    ctx.fillText(`★   ${footerText}   ★`, width / 2, 890, width - 130);

    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 Reward Generator is a creative tool that transforms your uploaded photos into vintage-style ‘Wanted’ posters. The tool automatically applies a sepia-toned, aged parchment aesthetic and includes customizable text fields for titles, reward amounts, and footer messages. This tool is ideal for creating fun props for themed parties, social media content, role-playing game assets, or personalized novelty gifts.

Leave a Reply

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