0

I want to resize user uploaded images and get a thumbnail and other image dimensions. I use this code to receive uploaded images 

   var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;
    if (!file.type.match(imageType)) {
        continue;
    }
    var img = document.getElementById("thumbnil");
    img.file = file;
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(file);
}

I want the uploaded image be resized to thumbnail size to 136 × 136 and single image size to 454 × 527 so that I can save them to the database. How can I adjust the code to resize the image?

jone2
  • 191
  • 1
  • 4
  • 18
  • 3
    Use a canvas element – Musa Feb 02 '18 at 14:25
  • 1
    Possible duplicate of [Image resizing client-side with JavaScript before upload to the server](https://stackoverflow.com/questions/2434458/image-resizing-client-side-with-javascript-before-upload-to-the-server) – Matt S Feb 02 '18 at 14:27
  • @Musa could you give a detailed example of how to use the `canvas` element? Otherwise your comment will not help the question asker to find a solution. – SaschaM78 Feb 02 '18 at 14:27
  • @SaschaM78 no, my comment is sufficient for a can i have teh codez question – Musa Feb 02 '18 at 14:29
  • @SaschaM78, why because people need to be spoon fed? – Ian Brindley Feb 02 '18 at 14:41

0 Answers0