Please bookmark this page to avoid losing your image tool!

Image Heart Shape Cropper

(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 the shape of a heart.
 *
 * @param {Image} originalImg The original image object to be cropped.
 * @returns {HTMLCanvasElement} A canvas element with the heart-shaped image.
 */
function processImage(originalImg) {
    // Create a new canvas element.
    const canvas = document.createElement('canvas');

    // To ensure the heart shape is not distorted, we use a square canvas.
    // The size of the square is determined by the smaller dimension of the original image.
    const size = Math.min(originalImg.width, originalImg.height);
    canvas.width = size;
    canvas.height = size;

    // Get the 2D rendering context.
    const ctx = canvas.getContext('2d');

    // Define the heart shape path.
    // This path is equivalent to a standard SVG heart shape, scaled to the canvas size.
    // The original path is based on a 300x300 canvas for easy scaling.
    const w = canvas.width;
    const h = canvas.height;
    const scaleX = w / 300;
    const scaleY = h / 300;

    ctx.beginPath();
    ctx.moveTo(150 * scaleX, 50 * scaleY);
    ctx.bezierCurveTo(100 * scaleX, 0, 0, 50 * scaleY, 50 * scaleX, 150 * scaleY);
    ctx.bezierCurveTo(100 * scaleX, 250 * scaleY, 200 * scaleX, 250 * scaleY, 250 * scaleX, 150 * scaleY);
    ctx.bezierCurveTo(300 * scaleX, 50 * scaleY, 200 * scaleX, 0, 150 * scaleX, 50 * scaleY);
    ctx.closePath();

    // Set the drawn path as the clipping region.
    ctx.clip();

    // Calculate the dimensions to draw the image to fill the entire heart shape (cover effect).
    const imgAspectRatio = originalImg.width / originalImg.height;
    const canvasAspectRatio = 1; // Our canvas is a square

    let drawWidth, drawHeight, x, y;

    if (imgAspectRatio > canvasAspectRatio) {
        // Image is wider than the canvas, so scale by height
        drawHeight = size;
        drawWidth = drawHeight * imgAspectRatio;
        x = (size - drawWidth) / 2; // Center horizontally
        y = 0;
    } else {
        // Image is taller than or same aspect as the canvas, so scale by width
        drawWidth = size;
        drawHeight = drawWidth / imgAspectRatio;
        x = 0;
        y = (size - drawHeight) / 2; // Center vertically
    }

    // Draw the original image onto the canvas, inside the clipped heart shape.
    ctx.drawImage(originalImg, x, y, drawWidth, drawHeight);

    // Return the canvas with the final heart-shaped image.
    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 Cropper is an online tool that allows users to crop images into a heart-shaped format. This tool can be useful for creating personalized gifts, designing unique social media graphics, or decorating digital scrapbooks. By transforming regular images into a heart shape, it adds a creative and emotional touch to visual content, ideal for occasions like Valentine’s Day, anniversaries, or romantic presentations.

Leave a Reply

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