0

From my javascript function below, I used to resize the image quality so I can upload it faster to server side:

let canvas;
let array_WH = new Array();
let percent = 50;
let img = new Image();

$(function() {

  function ff(height, width, percentage) {

    var newHeight = height * (percentage / 100);

    var newWidth = width * (percentage / 100);

    return [newWidth, newHeight];
  }

  $("#file_select").change(function(e) {

    var fileReader = new FileReader();

    fileReader.onload = function(e) {



      img.onload = function() {

        array_WH = ff(img.height, img.width, percent); //Pavel: changed order to correct

        console.log('old width: ' + img.width);
        console.log('new width: ' + array_WH[0]);

        width = array_WH[0];

        height = array_WH[1];

        if (canvas) return;

        canvas = document.createElement("canvas");

        canvas.width = width;

        canvas.height = height;

        canvas.getContext("2d").drawImage(this, 0, 0, width, height);

        // //Line added
        //var canvasData = canvas.toDataURL(); //Pavel: also for  png can be: toDataURL("image/png");
        var canvasData = canvas.toDataURL('image/jpeg', 0.5); //Pavel: sec param is quality from 0 to 1
        // //Line edited
        this.src = canvasData;
        // //Line added
        console.log(canvasData.length * 3 / 4, ' bytes');

        document.body.appendChild(this); //remove this if you don't want to show it

      }

      img.src = e.target.result;

    }

    fileReader.readAsDataURL(e.target.files[0]);

  });

});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<h1 class="logo">Upload Picture</h1>
<div id="upload_form_div">
  <form id="upload_form" method="POST" enctype="multipart/form-data" action="upload">
    <input type="file" name="file" capture="camera" id="file_select" />
    <input type="submit" value="submit image">
  </form>
</div>

<div id="loading" style="display:none;">
  Uploading your picture...
</div>

The image size was resized pretty well, but the image file that stored in destination folder was the original image, one that was not resized. I've google around but have no clue how it work.

Please kindly suggest and advise how I can upload the image after I resized to server? Thanks so much.

Houy Narun
  • 1,557
  • 5
  • 37
  • 86
  • after you resized the image you can [send the image as base64 string and create image from it on the server](https://stackoverflow.com/a/11511605/1816407). But i would recommend resizing image on the server side – MakeLoveNotWar Nov 21 '18 at 11:35
  • @line88, thanks I would like it to do resizing at client-side so that I can upload it faster to server-side. – Houy Narun Nov 21 '18 at 11:39
  • Then @HouyNarun take a look to this answer https://stackoverflow.com/a/34789629/4281779 – Zakaria Acharki Nov 21 '18 at 11:41
  • @ZakariaAcharki thanks, seems it does not work for my case. could you please elaborate? – Houy Narun Nov 22 '18 at 03:20
  • @ZakariaAcharki from that answer, I'm not using ajax to upload the file, I just use the simple submit button only, thanks. – Houy Narun Nov 22 '18 at 03:49
  • Is there anything stopping you from capturing the submit action and using ajax to post your image? – Zakaria Acharki Nov 22 '18 at 08:27
  • @ZakariaAcharki not only image that was to send to server but other information fields as well, therefore, I would like it to submit along together, Thanks – Houy Narun Nov 23 '18 at 12:52

0 Answers0