3

Estoy tratando de crear un canva en el que hay una imagen fija siempre y a continuación podamos subir una imagen y que quede super puesta pero no consigo realizarlo, ya que la imagen nueva siempre reemplaza la que ya habia.

//imagen o render de fondo del canvas
window.onload = canvas;
function canvas()
{
var canvas = document.getElementById("canvas");
 
if( canvas && canvas.getContext("2d") ) 
{
var context          = canvas.getContext("2d");
  
var myImg         = document.getElementById("img");
context.drawImage(myImg, 0, 0, 550, 550, 0, 0, 600, 500);
 
}
}

//imagen que subimos a continuación
document.getElementById('inp').onchange = function(e) {
    var img = new Image();
    img.onload = draw;
    img.onerror = failed;
    img.src = URL.createObjectURL(this.files[0]);
    
  };
  function draw() {
    var canvas = document.getElementById('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0, 550, 550, 0, 0, 600, 500);
  }
  function failed() {
    console.error("The provided file couldn't be loaded as an Image media");
  }
canvas {
    border: 2px dotted black;
    }
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="file" id="inp" />
    <canvas id="canvas" width="500" height="400">
      Su navegador no soporta el elemento html5 canvas.
    </canvas>
    <img id="img" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" style="display: none;"/>
  </body>
</html>

Alguna idea sobre como podría realizar esto? en que me estoy equivocando? Muchas gracias.

2
  • ¿qué quieres decir con superpuesta? ¿Encima con transparencia? ¿? Commented el 1 abr. 2022 a las 10:06
  • @PabloLozano si por ejemplo una imagen que tenga una transparencia y se vea el fondo con la otra imagen debajo es decir que la nueva imagen se vea por encima. de igual manera aunque no usara una imagen con transparecia debería quedar superpuesta.
    – Sara11
    Commented el 1 abr. 2022 a las 10:07

1 respuesta 1

2

Podrías añadir una imagen como fondo con CSS y añadir transparencia cuando cargas una imagen nueva:

//imagen o render de fondo del canvas

//imagen que subimos a continuación
document.getElementById('inp').onchange = function (e) {
  var img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);

};
function draw() {
  var canvas = document.getElementById('canvas');
  
  var ctx = canvas.getContext('2d');
  ctx.globalAlpha = 0.5;
  ctx.drawImage(this, 0, 0, 550, 550, 0, 0, 600, 500);
  ctx.globalAlpha = 1; // dejamos la opacidad al 100% de nuevo
//he dejado de adaptar el tamaño del canvas a la nueva imagen
}
function failed() {
  console.error("The provided file couldn't be loaded as an Image media");
}
canvas {
    border: 2px dotted black;
    background-image: url('https://mdn.mozillademos.org/files/5397/rhino.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="file" id="inp" />
    <canvas id="canvas" width="500" height="400">
      Su navegador no soporta el elemento html5 canvas.
    </canvas>
  </body>
</html>

1
  • Muchisimas gracias justo quería hacer eso.
    – Sara11
    Commented el 1 abr. 2022 a las 10:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.