Article Categories

Selected Reading

Resize image before submitting the form HTML5

Javascript Web Development Front End Scripts

To resize an image before submitting a form in HTML5, you can use the HTML5 Canvas API with the drawImage() method. This allows you to scale images on the client-side before sending them to the server.

Basic Approach

The process involves loading the image into a canvas, scaling it using drawImage(), and then converting the canvas back to an image format for form submission.

Syntax

context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Parameters

img - The image element to draw
sx, sy - Source x and y coordinates (usually 0, 0)
sWidth, sHeight - Source width and height (original image dimensions)
dx, dy - Destination x and y coordinates (usually 0, 0)
dWidth, dHeight - Destination width and height (new scaled dimensions)

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Image Resize Demo</title>
</head>
<body>
    <input type="file" id="imageInput" accept="image/*">
    <canvas id="canvas" style="display:none;"></canvas>
    <div id="result"></div>

    <script>
        document.getElementById('imageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const img = new Image();
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            
            img.onload = function() {
                // Calculate new dimensions (50% scale)
                const scale = 0.5;
                const newWidth = Math.floor(img.width * scale);
                const newHeight = Math.floor(img.height * scale);
                
                // Set canvas dimensions
                canvas.width = newWidth;
                canvas.height = newHeight;
                
                // Draw scaled image
                ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, newWidth, newHeight);
                
                // Convert to blob for form submission
                canvas.toBlob(function(blob) {
                    document.getElementById('result').innerHTML = 
                        `Original: ${img.width}x${img.height}, Resized: ${newWidth}x${newHeight}`;
                }, 'image/jpeg', 0.8);
            };
            
            img.src = URL.createObjectURL(file);
        });
    </script>
</body>
</html>

Scaling Calculations

To maintain aspect ratio while resizing:

// Calculate scaled dimensions
var scale = 0.5; // 50% of original size
var newWidth = Math.floor(img.width * scale);
var newHeight = Math.floor(img.height * scale);

// Center the image on canvas (if canvas is larger)
var x = Math.floor((canvas.width - newWidth) / 2);
var y = Math.floor((canvas.height - newHeight) / 2);

Form Submission Method

// Convert canvas to blob for form submission
canvas.toBlob(function(blob) {
    const formData = new FormData();
    formData.append('resized_image', blob, 'resized.jpg');
    
    // Submit via fetch
    fetch('/upload', {
        method: 'POST',
        body: formData
    });
}, 'image/jpeg', 0.8); // 80% quality

Key Points

Use Math.floor() to ensure integer pixel values
Set canvas dimensions before drawing to avoid distortion
Convert canvas to blob using toBlob() for form submission
Specify image quality (0.0 to 1.0) when converting to JPEG

Conclusion

HTML5 Canvas with drawImage() provides an efficient way to resize images client-side before form submission. This reduces server load and upload times while maintaining image quality control.

karthikeya Boyini

Updated on: 2026-03-15T23:18:59+05:30

362 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next