How to extend canvas image's background and convert to File object in javascript? -

i need upload png/jpeg image file (image a) in image size browser export new image different size (image b). can see, want keep image a's ratio , fill missing part plain color (eg. white). how do using javascript?

edit: sorry bad question. i've edited question adding own code solve problem. work using canvas draw white background first draw uploaded image long fits canvas. use reimg.js capture canvas , download it.

however, problem if want use captured image, have upload again. below code not want.

so, there better way upload image file, processing code below retrieve file data (file object) without capturing , uploading image again?

// reimg.js  window.reimg = {        outputprocessor: function(encodeddata, svgelement) {            var ispng = function() {              return encodeddata.indexof('data:image/png') === 0;          };            var downloadimage = function(data, filename) {              var = document.createelement('a');              a.href = data;              a.download = filename;              document.body.appendchild(a);              a.click();          };            return {              tobase64: function() {                  return encodeddata;              },              toimg: function() {                  var imgelement = document.createelement('img');                  imgelement.src = encodeddata;                  return imgelement;              },              tocanvas: function(callback) {                  var canvas = document.createelement('canvas');                  var boundedrect = svgelement.getboundingclientrect();                  canvas.width = boundedrect.width;                  canvas.height = boundedrect.height;                  var canvasctx = canvas.getcontext('2d');                    var img = this.toimg();                  img.onload = function() {                      canvasctx.drawimage(img, 0, 0);                      callback(canvas);                  };              },              topng: function() {                  if (ispng()) {                      var img = document.createelement('img');                      img.src = encodeddata;                      return img;                  }                    this.tocanvas(function(canvas) {                      var img = document.createelement('img');                      img.src = canvas.todataurl();                      return img;                  });              },              tojpeg: function(quality) { // quality should between 0-1                  quality = quality || 1.0;                  (function(q) {                      this.tocanvas(function(canvas) {                          var img = document.createelement('img');                          img.src = canvas.todataurl('image/jpeg', q);                          return img;                      });                  })(quality);              },              downloadpng: function(filename) {                  filename = filename || 'image.png';                  if (ispng()) {                      // it's canvas                      downloadimage(encodeddata, filename);                      return;                  }                    // convert canvas first                  this.tocanvas(function(canvas) {                      downloadimage(canvas.todataurl(), filename);                  });              }          };      },        fromsvg: function(svgelement) {          var svgstring = new xmlserializer().serializetostring(svgelement);          return new this.outputprocessor('data:image/svg+xml;base64,' + window.btoa(svgstring), svgelement);      },        fromcanvas: function(canvaselement) {          var dataurl = canvaselement.todataurl();          return new this.outputprocessor(dataurl);      }    };    // script.js  var canvas = document.getelementbyid('canvas');  var context = canvas.getcontext('2d');    $('#uploadimage').on('change', function(event) {    var img = new image();    var reader = new filereader();    reader.onload = function(e) {      img.src = e.target.result;    };    reader.readasdataurl(event.target.files[0]);      img.onload = function() {      // draw white background      context.beginpath();      context.rect(0, 0, 500, 500);      context.fillstyle = "white";      context.fill();        // draw uploaded image      var scale = math.min((canvas.width / img.width), (canvas.height / img.height));      context.drawimage(img, 0, 0, img.width, img.height, (canvas.width - img.width * scale) / 2, (canvas.height - img.height * scale) / 2, img.width * scale, img.height * scale);    };    });    $('#btncapture').on('click', function() {    reimg.fromcanvas(canvas).downloadpng();  });

#canvas {    border: 1px solid seagreen;  }

<!doctype html>  <html lang="en">    <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>resize image</title>  </head>    <body>    <input id="uploadimage" type="file" accept="image/*" />    <button id="btncapture" type="button">capture</button>    <canvas id="canvas" height="500px" width="500px"></canvas>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    <script src="script.js"></script>  </body>    </html>

i've found answer. can solved converting canvas datauri converting datauri file. canvas datauri can done below snippet. then, convert data uri file append formdata .

var imgb64 = canvas.todataurl('image/png');