キャンバスで画像を圧縮し、カードを作成する例

<input id="file" type="file">

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    console.log(file)
    // The selected file is an image
    if (file.type.indexOf("image") == 0) {
      reader.readAsDataURL(file);    
    }
  });

var reader = new FileReader(); 
//read the file into the page as a Data URL 
  reader.readAsDataURL(file); 
  reader.onload=function(e) { 
    console.log(reader)
  } 

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // console.log(file)
    // The selected file is an image
    if (file.type.indexOf("image") == 0) {
      var reader = new FileReader(); 
      // Read the file into the page as a Data URL 
        reader.readAsDataURL(file); 
        reader.onload=function(e) { 
          // console.log(this.result)
          var pre=document.getElementById("pre"); 
          pre.setAttribute("src", this.result)
          canvasDataURL(this.result, 100, 0.5)
        }     
    }
  })
  /* [canvasDataURL Compression via canvas]
   * @params path The format of the image in base64
   * @params targetWidth The width of the compressed image.  
   * @params quality The smaller the quality value, the more blurry the image will be.
   */
  function canvasDataURL(path, targetWidth, quality) {
    var img = new Image();
    img.src = path
    img.onload = function () {
        // var that = this
        // console.log(that)
        // default scaled compression
        var w = this.width
        var h = this.height
        scale = w / h;
        w = targetWidth
        h = targetWidth / scale
        var quality = quality; // default image quality is 0.7
        // Generate canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // Create property nodes
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(this, 0, 0, w, h);
        // The smaller the quality value, the more blurry the drawn image will be
        var base64 = canvas.toDataURL('image/jpeg', quality);
        var result = document.getElementById("result"); 
        result.setAttribute("src", base64)
    }
  }

function drawCanvas (target) {
    var canvas = document.querySelector('#myCanvas')
    var ctx = canvas.getContext('2d')
    // is the ratio of physical pixels to device-independent pixels (dips) on the device
    var dp = window.devicePixelRatio || 1
    var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx. oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    var ratio = this.dp / this.backingStoreRatio
    var oldWidth = canvas.width
    var oldHeight = canvas.height
    canvas.width = oldWidth * ratio
    canvas.height = oldHeight * ratio
    canvas.style.width = oldWidth + 'px'
    canvas.style.height = oldHeight + 'px'
    ctx.scale(ratio, ratio)
    var headerImg = new Image()
    var bgImg = new Image()
    headerImg.src = target
    bgImg.src = '. /bg.png'
    headerImg.onload = (e) => {
      // The aspect ratio of the image
      var rate = headerImg.width / headerImg.height
      console.log(rate)
      bgImg.onload = (e) => {
        ctx.drawImage(headerImg, 10, 30, 50, (50 / rate))
        // Background image
        ctx.drawImage(bgImg, 0, 0, 150, 150)
        ctx.fillText('Awesome', 80, 70)
        var resultImg = new Image()
        resultImg.src = canvas.toDataURL('image/png', 1)
        resultImg.style.width = '100%'
        var cardImg = document.getElementById("cardImg"); 
        cardImg.setAttribute("src", resultImg.src)
      }
    }