javaScript Resize Image Example

javaScript Resize Image Example

Overview

Usually, when you are implementing an image upload, that time you want to resize the image or before uploading you want to change the image size. So let’s explain how to resize the image and convert it into base64 content.

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

How to Resize Image Size using Canvas and Convert into Base64 Encoded String (Data URLs) and Blob in Javascript

Resizing an Image with Javascript is fairly simple. Let’s take an example of that:

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

Create Html

<input id="imageFile" name="imageFile" type="file" class="imageFile"  accept="image/*"   /> 
<input type="button" value="Resize Image"  onclick="ResizeImage()"/> 
<br/>
<img src="" id="preview"  >
<img src="" id="output">

Implement JavaScript 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 &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {
        var filesToUploads = document.getElementById('imageFile').files;
        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 = 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('output').src = dataurl;
            }
            reader.readAsDataURL(file);

        }

    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
}

Conclusion

In this tutorial, you have learned how to resize the image in javascript and how to convert the resize image into base64 content.

You may like

  1. JavaScript Create & Call Functions with Example
  2. JavaScript Operators With Examples
  3. String Contains JavaScript | String includes() Method
  4. JavaScript Replace String With Examples
  5. JavaScript Array splice() Method By Example
  6. JavaScript: Clone an Array & Object By Examples
  7. Sorting Using JavaScript Array Sort() Method
  8. JavaScript: Convert String to Array JavaScript
  9. javaScript Push() Array By Example
  10. javaScript Push Array, Items Into Array Example
  11. Check the Object is Array or not in javascript
  12. JavaScript: Important Array Methods

If you have any questions or thoughts to share, use the comment form below to reach us.

Leave a Reply

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