<div>
  <input type='file'><button onclick='loadImage();'>Upload img</button>
</div>

<canvas id="canvas"></canvas>

<div>
  <a href="#" download="result.jpg" onclick="downloadImage()">Download Image</a>
</div>
canvas {
  margin: 1rem 0;
  border: 1px solid;
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bg = new Image();

bg.src = "https://public.ragtime-kitty.com/rk.jpg";
bg.crossOrigin = "Anonymous";

bg.onload = () => {
  ctx.drawImage(bg, 0, 0, 150, 150);
}

canvas.width = 150;
canvas.height = 150;


function loadImage() {
  var input = document.querySelector("input"),
      file = input.files[0],
      reader = new FileReader(),
      img;

  reader.onload = drawImage;
  reader.readAsDataURL(file);

  function drawImage() {
    img = new Image();
    img.onload = function () {
      ctx.globalAlpha = 0.5;
      ctx.drawImage(img, 0, 0, 150, 150);
    };
    img.src = reader.result;
  }
}

function downloadImage() {
  var result = canvas.toDataURL("image/jpg");
  document.querySelector('a').href = result;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.