dager.html

<!DOCTYPE html>
<html>
<head>
    <style>

  
</head>
<body onload="generarImagen()">
  <button onclick="generarImagen()">Generar y Descargar</button>
  <canvas id="canvas" width="3120" height="3120"></canvas>

  <script>
    function generarImagen() {
      // Obtener el contexto del canvas
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");


      // AQUI METI MANO
      var imagenPrincipal = window.AppInventor.getWebViewString();
      imagenPrincipal.src = img.split(",")[0];
	  
      imagenPrincipal.onload = function() {
        // Dibujar la imagen principal en el canvas
        ctx.drawImage(imagenPrincipal, 0, 0);

        // Cargar el marco
        var imagenPNG = new Image();
        imagenPNG.src = "marco.png";        //AQUI HAY DRAGONES
        imagenPNG.onload = function() {
          // Calcular la posición para alinear la imagen PNG en la base del canvas
          var x = (canvas.width - imagenPNG.width) / 2;
          var y = canvas.height - imagenPNG.height;

          // Dibujar la imagen PNG en el canvas
          ctx.drawImage(imagenPNG, x, y);

          // Descargar la imagen generada
          //descargarImagen(canvas.toDataURL());

	//pa devolverla al mit inventor	
	 //window.AppInventor.setWebViewString( canvas.toDataURL() )
        };
      };
    }

    function descargarImagen(dataURL) {
      // Crear un enlace temporal
      var enlace = document.createElement("a");
      enlace.href = dataURL;
      enlace.download = "imagen_generada.png";

      // Hacer clic en el enlace para descargar la imagen
      enlace.click();
    }
  </script>
</body>
</html>