Please bookmark this page to avoid losing your image tool!

Unlevel Image Dips Corrector

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, dipAngleDegrees = 5, expandToFit = 1, backgroundColor = "transparent") {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Parse the dip angle. To correct an image dipping by X degrees,
    // we rotate it by -X degrees to level it out.
    const angle = parseFloat(dipAngleDegrees) || 0;
    const radians = -(angle * Math.PI) / 180;

    const w = originalImg.width;
    const h = originalImg.height;

    let newW = w;
    let newH = h;

    // If expandToFit is true (1), recalculate canvas sizes so that no corners are chopped off
    if (Number(expandToFit) === 1) {
        newW = Math.abs(w * Math.cos(radians)) + Math.abs(h * Math.sin(radians));
        newH = Math.abs(w * Math.sin(radians)) + Math.abs(h * Math.cos(radians));
    }

    canvas.width = newW;
    canvas.height = newH;

    // Set background color if specificed (useful for filling out empty triangles from the rotation)
    if (backgroundColor !== "transparent") {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // Move drawing origin to the center of the canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);
    
    // Rotate canvas context by the correction angle
    ctx.rotate(radians);
    
    // Smooth image representation during rotation
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // Draw the original image centered relative to the translated origin
    ctx.drawImage(originalImg, -w / 2, -h / 2, w, h);

    return canvas;
}

Free Image Tool Creator

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

Create a custom image tool

Description

The Unlevel Image Dips Corrector is a tool designed to straighten and level images that appear tilted or slanted. By applying a specific degree of rotation, the tool compensates for angular errors in photography. It features an option to expand the canvas size to ensure that no parts of the image are cut off during the rotation process and allows users to set a background color to fill any resulting empty corners. This tool is useful for photographers or document scanners who need to correct perspective issues or crooked shots to achieve a perfectly horizontal or vertical alignment.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: