1

**Dibujo en una imagen circulo pero a la hora de guardar la imagen solo se guarda el dibujo **

Este es mi canvas

<input         type="button" value='Guardar imagen' onclick='descargar();'/>
canvas id='myCanvas' width='626' height='417'></canvas>
            <form name='formName'>
                <input name='inputName'>

                <img id='theImg' src='https://image.freepik.com/foto-gratis/microchips-radioelementos-procesador-placa-electronica-placa-base_94132-454.jpg'>

                
            </form>

mis funciones son las siguientes

  1. Elemento de lista Draw () lo utilizo para dibujar
  2. Elemento de lista descargar()lo utilizo para descargar la imagen que es donde solo logro guardar el dibujo
<script>
 
    function Draw() {
        //alert(document.getElementById("X").value + document.getElementById("Y").value + document.getElementById("R").value + document.getElementById("L").value);
        var img = document.getElementById("theImg");
        var cnvs = document.getElementById("myCanvas");

        cnvs.style.position = "absolute";
        cnvs.style.left = img.offsetLeft + "px";
        cnvs.style.top = img.offsetTop + "px";

        var ctx = cnvs.getContext("2d");
        ctx.beginPath();
        ctx.clearRect(0, 0, ctx.canvas.offsetWidth, ctx.canvas.offsetHeight);//limipamos el arco anteri
        ctx.arc(document.getElementById("X").value, document.getElementById("Y").value, document.getElementById("R").value, 0, 2 * Math.PI, false);
        ctx.lineWidth = document.getElementById("L").value;
        ctx.strokeStyle = document.getElementById("C").value;
        ctx.stroke();

    }


    
   
    function descargar() {
    
 

        var c = document.getElementById("myCanvas");
            let filename = prompt("Guardar como", ""),
                link = document.createElement('a');

            if (filename == null) {//si el usiario dio cancelar
                return false;
            }
            else if (filename == "") {//si el usuario le dio click y no puso nombre al archivo
                link.download = "Sin título";
                link.href = c.toDataURL("image/png");//usa la imagen del canvas
    
            }
            else {//si el usuario le dio aceptar y puso un nombre al archivo
                link.download = filename;
                try {
                    link.href = c.toDataURL("image/jpg");
                } catch (error) {
                    alert(error);
                    // expected output: ReferenceError: nonExistentFunction is not defined
                    // Note - error messages will vary depending on browser
                }


                


            }
            link.click();
     


    }




  
</script>

actualmente solo se me descar la imagen de la siguiente manera introducir la descripción de la imagen aquí lo que busco es que el dibujo se guarde arriba de una imagen como lo muestra el siguiente ejemplo

introducir la descripción de la imagen aquí

1 respuesta 1

1

Debes agregar a tu método Draw() la imagen de fondo que deseas en tu canvas

una linea como esta canvasContext.drawImage(imagen, 0, 0);

tú código debe quedar así:

function Draw() {
    //alert(document.getElementById("X").value + document.getElementById("Y").value + document.getElementById("R").value + document.getElementById("L").value);
    var img = document.getElementById("theImg");
    var cnvs = document.getElementById("myCanvas");

    cnvs.style.position = "absolute";
    cnvs.style.left = img.offsetLeft + "px";
    cnvs.style.top = img.offsetTop + "px";

    var ctx = cnvs.getContext("2d");
    ctx.beginPath();
    ctx.clearRect(0, 0, ctx.canvas.offsetWidth, ctx.canvas.offsetHeight);//limipamos el arco anteri
    ctx.arc(document.getElementById("X").value, document.getElementById("Y").value, document.getElementById("R").value, 0, 2 * Math.PI, false);

    // img ya lo obtuviste al inicio de tu metodo Draw()
    // Solo Colocamos la IMAGEN de fondo en tu canvas con el metodo drawImage
    ctx.drawImage(img, 0, 0);

    ctx.lineWidth = document.getElementById("L").value;
    ctx.strokeStyle = document.getElementById("C").value;
    ctx.stroke();

}

Recuerda que si estas probando en local (offline) vas a tener problemas con crossorigin en Google Chrome y en Microsft Edge, creo que Fire Fox te deja pasar sin problemas.

1
  • excelente funciono correctamente ,muchas gracias ppor tu pronta respuesta Commented el 16 nov. 2020 a las 22:22

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.