Please bookmark this page to avoid losing your image tool!

Image Paint Tool From Photo

(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.
/**
 * Converts a photo into a painting-like image by applying numerous small "brush strokes".
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} brushSize The size (width) of each brush stroke. Default is 5.
 * @param {number} strokeLength The length of each brush stroke. Default is 8.
 * @param {number} strokeDensity A percentage that controls the number of strokes applied. Higher values result in a more detailed but slower rendering. Default is 50.
 * @param {number} opacity The opacity of each brush stroke, from 0 (transparent) to 1 (opaque). Default is 0.7.
 * @returns {HTMLCanvasElement} A canvas element with the painted version of the image.
 */
function processImage(originalImg, brushSize = 5, strokeLength = 8, strokeDensity = 50, opacity = 0.7) {
    // Ensure parameters are parsed as numbers, with fallback defaults for invalid inputs.
    const numBrushSize = Number(brushSize) || 5;
    const numStrokeLength = Number(strokeLength) || 8;
    const numStrokeDensity = Number(strokeDensity) || 50;
    const numOpacity = Number(opacity) || 0.7;

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create a temporary canvas to sample pixel data from the original image.
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = width;
    sourceCanvas.height = height;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0);
    const imageData = sourceCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create the destination canvas where the painting will be rendered.
    const destCanvas = document.createElement('canvas');
    destCanvas.width = width;
    destCanvas.height = height;
    const destCtx = destCanvas.getContext('2d');

    // Fill the background with white, like a real canvas.
    destCtx.fillStyle = 'white';
    destCtx.fillRect(0, 0, width, height);

    // Set stroke properties for the "brush".
    destCtx.lineWidth = numBrushSize;
    destCtx.lineCap = 'round'; // Makes strokes look softer at the ends.

    // Calculate the number of strokes based on image area, brush size, and density.
    // A larger brush requires fewer strokes to cover the canvas.
    const numStrokes = Math.floor((width * height) / (numBrushSize > 0 ? numBrushSize : 1) * (numStrokeDensity / 100));

    // Draw the strokes randomly across the canvas.
    for (let i = 0; i < numStrokes; i++) {
        // Pick a random position from the original image to sample the color.
        const x = Math.floor(Math.random() * width);
        const y = Math.floor(Math.random() * height);

        // Get the color of the pixel at the random position.
        const pixelIndex = (y * width + x) * 4;
        const r = data[pixelIndex];
        const g = data[pixelIndex + 1];
        const b = data[pixelIndex + 2];

        // Set the stroke color and opacity.
        destCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${numOpacity})`;

        // Define a short stroke centered on the sample point with a random angle.
        const angle = Math.random() * 2 * Math.PI;
        const halfLength = numStrokeLength / 2;
        
        const startX = x - halfLength * Math.cos(angle);
        const startY = y - halfLength * Math.sin(angle);
        const endX = x + halfLength * Math.cos(angle);
        const endY = y + halfLength * Math.sin(angle);

        // Draw the individual stroke.
        destCtx.beginPath();
        destCtx.moveTo(startX, startY);
        destCtx.lineTo(endX, endY);
        destCtx.stroke();
    }

    return destCanvas;
}

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 Paint Tool from Photo transforms your photographs into artistic, painting-like images by mimicking brush strokes. Users can customize the brush size, stroke length, density, and opacity to achieve the desired artistic effect. This tool is ideal for artists, graphic designers, or anyone looking to create unique, painted versions of their photos for use in projects, social media, or personal art collections.

Leave a Reply

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