Skip to main content

Posts

Showing posts with the label Resize image before upload JavaScript

How do I resize an image on the client size before upload?

Please follow the below example to Image resizing client-side with JavaScript before upload to the server. In modern browser you can use canvas to load and save images data. All modem browsers are supported to the FileReader. /// How do I read image using FileReader? /// Example to read file using FileReader. < input type = 'file' accept = 'image/*' onchange = 'openFile(event)' >< br > < img id = 'output' > < script >   var openFile = function ( event ) {     var input = event . target ;     var reader = new FileReader ();     reader . onload = function (){       var dataURL = reader . result ;       var output = document . getElementById ( 'output' );       output . src = dataURL ;     };     reader . readAsDataURL ( input . files [ 0 ]);   }; ...