How to make Image Resizer in JavaScript

How to make Image Resizer in JavaScript

Image resizer in javascript is the most used project. We will cover all the points in this tutorial on how to make an image resizer in javascript. When we try to upload an image to any server time we saw a message to the image size is less or greater. So this time we need an image resizer. We will resize the image and also see the preview of the image after resizing.

So first step create HTML file with any name and then update it with given code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to make Image Resizer in Javascript - DevSoul</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container pt-3">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-warning">
                        <H2 class="pt-2 pb-2 text-center">Online Image Resize Image</H2>
                    </div>
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <input id="image" name="image" type="file" class="image form-control " accept="image/*" />
                       
                        </div>
                        <div class="from-group">
                            <input type="button" class="btn btn-warning" value="Image Resize" onclick="ResizeImage()" />
                        </div>
                        <div class="form-group">
                            <img src="" id="imagepreview">
                            <img src="" id="result">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
     <!--JavaScript-->
    <script>
        $(document).ready(function () {

            $('#image').change(function (evt) {

                var files = evt.target.files;
                var file = files[0];

                if (file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        document.getElementById('imagepreview').src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
        function ResizeImage() {
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                var filesToUploads = document.getElementById('image').files;
                var file = filesToUploads[0];
                if (file) {
                    var reader = new FileReader();
                    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 = 400;
                        var MAX_HEIGHT = 400;
                        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('result').src = dataurl;
                    }
                    reader.readAsDataURL(file);
                }

            } else {
                alert('Your Browser API is not supporting.');
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Comments

No Comment posted Yet!

Leave a Reply

OK! You can skip this field.