Post
Ask Question

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

Javascript code : 
  1. function getBase64Image() {  
  2.            var filesSelected = document.getElementById("myFile").files;  
  3.   
  4.            if (filesSelected.length > 0) {  
  5.                var file = filesSelected[0];  
  6.   
  7.                if (file.type.match('image.*')) {  
  8.                    var reader = new FileReader();  
  9.                    reader.readAsDataURL(file);  
  10.                    reader.onload = function (e) {  
  11.                        var image = new Image();  
  12.                        image.onload = function (imageEvent) {  
  13.   
  14.                            // Resize the image using canvas  
  15.                            var canvas = document.createElement('canvas'),  
  16.                                max_size = 300,// TODO : max size for a pic  
  17.                                width = image.width,  
  18.                                height = image.height;  
  19.                            if (width > height) {  
  20.                                if (width > max_size) {  
  21.                                    height *= max_size / width;  
  22.                                    width = max_size;  
  23.                                }  
  24.                            } else {  
  25.                                if (height > max_size) {  
  26.                                    width *= max_size / height;  
  27.                                    height = max_size;  
  28.                                }  
  29.                            }  
  30.                            canvas.width = width;  
  31.                            canvas.height = height;  
  32.                            canvas.getContext('2d').drawImage(image, 0, 0, width, height);  
  33.   
  34.                            //Getting base64 string;  
  35.                            var dataUrl = canvas.toDataURL('image/jpeg');  
  36.   
  37.                            //Getting blob data  
  38.                            RESIZED_IMAGE = dataURLToBlob(dataUrl);  
  39.                        }  
  40.                        image.src = e.target.result;  
  41.                    }  
  42.                }  
  43.            };  
  44.        }  
  45.        /* Utility function to convert a canvas to a BLOB */  
  46.        var dataURLToBlob = function (dataURL) {  
  47.            var BASE64_MARKER = ';base64,';  
  48.            if (dataURL.indexOf(BASE64_MARKER) == -1) {  
  49.                var parts = dataURL.split(',');  
  50.                var contentType = parts[0].split(':')[1];  
  51.                var raw = parts[1];  
  52.   
  53.                return new Blob([raw], { type: contentType });  
  54.            }  
  55.   
  56.            var parts = dataURL.split(BASE64_MARKER);  
  57.            var contentType = parts[0].split(':')[1];  
  58.            var raw = window.atob(parts[1]);  
  59.            var rawLength = raw.length;  
  60.   
  61.            var uInt8Array = new Uint8Array(rawLength);  
  62.   
  63.            for (var i = 0; i < rawLength; ++i) {  
  64.                uInt8Array[i] = raw.charCodeAt(i);  
  65.            }  
  66.   
  67.            return new Blob([uInt8Array], { type: contentType });  
  68.        }  
  69.        /* End Utility function to convert a canvas to a BLOB */  
UI Code
  1. <input type="file" id="myFile" name="pic" onchange="getBase64Image()" accept="image/*">