Canvas Scale

by hokuma

HTML

<div class='editor'>
  <input type='file' id='fileSelector' accept='image/jpeg'/>
  <canvas id='scale'></canvas>
</div>

<div class='result'>
  <img id='scaledImg' src='' />
</div>

JavaScript

var dom = document.getElementById('fileSelector');
var scaledImg = document.getElementById('scaledImg');
dom.addEventListener('change', function(event) {
  var reader = new FileReader();
  reader.onload = (event) => {
    var canvas = document.getElementById('scale');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = event.target.result;
    img.onload = function() {
      ctx.scale(0.05,0.05);
      ctx.drawImage(img, 0, 0);
      var base64 = ctx.getImage('image/jpeg');
      console.log(base64);
      var scaledImg.src = 'data:image/jpeg;base64,' + base64;
    };
  };
  reader.readAsDataURL(event.target.files[0]);
});