Please bookmark this page to avoid losing your image tool!

Image Heart Shape 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.
/**
 * Crops an image into a heart shape.
 *
 * @param {HTMLImageElement} originalImg The original image object to be processed.
 * @returns {HTMLCanvasElement} A canvas element displaying the image cropped into a heart shape.
 */
function processImage(originalImg) {
    // Create a new canvas element.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the intrinsic dimensions of the original image.
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

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

    // Begin drawing the heart path.
    // This path will be used as a clipping mask.
    ctx.beginPath();

    // Start at the top-center dip of the heart. The coordinates are relative
    // to the canvas size to ensure the heart scales with the image.
    ctx.moveTo(w / 2, h * 0.35);

    // Draw the left side of the heart using a cubic Bezier curve.
    // The control points are carefully chosen to create a smooth, rounded lobe.
    ctx.bezierCurveTo(
        w * 0.1, h * 0.1,   // Control point 1 (pulls curve towards top-left)
        0, h * 0.6,         // Control point 2 (pulls curve towards mid-left)
        w / 2, h * 0.95    // End point (bottom tip of the heart)
    );

    // Draw the right side of the heart, creating a symmetrical shape.
    ctx.bezierCurveTo(
        w, h * 0.6,         // Control point 1 (pulls curve towards mid-right)
        w * 0.9, h * 0.1,   // Control point 2 (pulls curve towards top-right)
        w / 2, h * 0.35    // End point (back to the starting dip)
    );

    ctx.closePath();

    // Apply the heart path as a clipping region.
    // Subsequent drawing operations will only be visible inside this path.
    ctx.clip();

    // Draw the original image onto the canvas.
    // The clipping region will make it appear heart-shaped.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 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 Heart Shape Generator allows you to crop images into a heart shape. This tool can be used for creating personalized gifts, enhancing social media posts, or designing romantic graphics. By simply uploading an image, users can transform it into a visually appealing heart-shaped format, perfect for Valentine’s Day cards, love-themed projects, or any occasion where a heart motif is desired.

Leave a Reply

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