<form class=" center white_bold">
  Link de la imagen: <input type="text" value="https://raw.githubusercontent.com/NestorPlasencia/img/master/imgejemplo1.png" onchange="actualizar()" id="link" />
</form>
<canvas id="canvas" style="display: none;"></canvas>
<img id="canvasImg">
<div class="boton center white_bold">
  <a id="download" href="" download>Descargar</a>
</div>
body {
  background-color: #27ae60;
}

form {
  margin: 10px auto;
  width: 300px;
}

form input {
  margin: 10px auto;
  width: 300px;
}

#canvasImg {
  display: block;
  margin: 10px auto;
}

.boton {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  background: #333;
}

.boton a {
  text-decoration: none;
  color: white;
}

.white_bold {
  font-family: Helvetica, Arial, Sans-Serif;
  color: white;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
}

.center {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imagen = document.getElementById("canvasImg");
  
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');

var filtro = new Image();
filtro.setAttribute('crossOrigin', 'anonymous');

filtro.src = "https://raw.githubusercontent.com/NestorPlasencia/img/master/filtro.png"

filtro.onload = function() {
  actualizar();
}

function actualizar() {
  
  img.src = document.getElementById("link").value;
  var imgTag = 0;
  
  img.onload = function() {
    
    let long = 300;
    
    let ancho = img.width;
    let alto = img.height;
    
    let fancho = filtro.width;
    let falto = filtro.height;
    
    if (ancho < alto) {
      h = long;
      w = h * ancho / alto;
    } else {
      w = long;
      h = w * alto / ancho;
    }
    canvas.width = imagen.width = w;
    canvas.height = imagen.height = h;
    
    let hf = w * falto / fancho;
    
    ctx.beginPath();
    ctx.drawImage(img, 0, 0, w, h);  
    ctx.drawImage(filtro, 0, h - hf, w, hf);
    ctx.closePath();
    
    imgTag = canvas.toDataURL("image/png");
    imagen.src = imgTag;
    imagen.setAttribute('style','display: block;');
    document.getElementById("download").setAttribute("href", imgTag);
  };
  img.onerror = function() {
    imagen.src = imgTag;
    imagen.setAttribute('style','display: none;');
    document.getElementById("download").setAttribute("href", imgTag);
  };
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.