javaScript Resize Image Example

Thursday , 6, May 2021 Leave a comment

Learn how to resize images using JavaScript .when you are upload a image , that time you want to resize the image or before uploading you want to change the image size. So now we are explain how to resize the image and convert it into base64 content.

In this tutorial, we will Discussion how to resize an image using javascript and before resizing the image how to shows the preview of resizing an image. Here you will show the resizing of image and show preview with resizing the image.

If you use this below example that shows to preview the of resizing an image.

js code

$(document).ready(function() {
 
    $('#imageFile').change(function(evt) {
 
        var files = evt.target.files;
        var file = files[0];
 
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});
 
function ResizeImage() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var filesToUploads = document.getElementById('imageFile').files;
        var sizeHeight = document.getElementById('height').value;
        var sizeWidth = document.getElementById('width').value;
        var file = filesToUploads[0];
        if (file) {
 
            var reader = new FileReader();
            // Set the image once loaded into file reader
            reader.onload = function(e) {
 
                var img = document.createElement("img");
                img.src = e.target.result;
 
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
 
                var MAX_WIDTH = sizeWidth;
                var MAX_HEIGHT = sizeHeight;
                var width = img.width;
                var height = img.height;
 
                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, width, height);
 
                dataurl = canvas.toDataURL(file.type);
                document.getElementById('output').src = dataurl;
            }
            reader.readAsDataURL(file);
 
        }
 
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
}

html code:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <input id="imageFile" name="imageFile" type="file" class="imageFile"  accept="image/*"   /> 
    <input type="number" name="height" placeholder="height" id="height"><input type="number" name="width" placeholder="width" id="width">
<input type="button" value="Resize Image"  onclick="ResizeImage()"/> 
<br/>
<img src="" id="preview"  >
<img src="" id="output">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>
JavaScript Scroll to Top button

Leave a Reply

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