1

El código lo que hace es colorear una imagen que tengo de fondo sobre el CANVAS (similar a lo que hace PAINT), pero a la hora de guardar la imagen, se descargan solo los cambios hechos, y la imagen de fondo se pierde.

Agradecería inmensamente a la persona que me ayuda con este pequeño problema ya que he probado de todo y no doy con la solución de como guardar la imagen con los cambios hechos sobre ella.

<html lang="en">
<style type="text/css">
  canvas {
    background-image: url(https://www.ejemplode.com/design/images/logo.jpg);
  }
  
  .herramientas {
    width: 100px;
  }
  
  .herramientas div {
    background-color: black;
  }
  
  .herramientas div:hover {
    border: solid red 1px;
  }
  
  .herramientas img:hover {
    border: solid red 1px;
  }
</style>
<script>
  var color = "#000000";
  var tamano = 5;
  var pintura = false;

  function pintar(event) {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    if (pintura) {
      ctx.fillStyle = color;
      ctx.fillRect(event.clientX - 10, event.clientY + 15, tamano, tamano);
    }

  }

  function activar() {
    pintura = true;
  }

  function desactivar() {
    pintura = false;
  }

  function scolor() {
    color = document.getElementById("colores").value;
  }

  function stamano(numero) {
    tamano = numero;
  }

  function guardari() {
    var canvas = document.getElementById("canvas");
    var imagen = canvas.toDataURL("image/png");
    this.href = imagen;

  }
</script>

<body>
  <table>
    <tr>
      <td><canvas width="440" height="450" id="canvas" onmousemove="pintar(event);" onmousedown="activar();" onmouseup="desactivar();"></canvas></td>
      <td class="herramientas">
        <div style="width: 10px; height: 10px;" onclick="stamano(3);"></div><br />
        <div style="width: 20px; height: 20px;" onclick="stamano(8);"></div><br />

        <input type="color" id="colores" onchange="scolor();" />
        <a href="#" download="canvas.png" id="guardarimagen" onclick="href=canvas.toDataURL">Guardar como imagen</a>
      </td>
    </tr>
  </table>
  <script>
    document.getElementById("guardarimagen").addEventListener("click", guardari, false);
  </script>
</body>

</html>

2 respuestas 2

1

Dibuja la imagen que tienes al fondo usando javascript y no CSS.

function cargarFondo(){
    var canvas = document.getElementById('canvas'),
           context = canvas.getContext('2d'),
           fondo = new Image();

     //Definimos la propiedad src con la ruta de la imagen
     fondo.src = 'https://www.ejemplode.com/design/images/logo.jpg';

    //Usamos el evento 'onload' de la imagen
    fondo.onload = function(){
        //Pintamos la imagen una vez cargada
        context.drawImage(fondo, 0, 0);
    }
}

Esa función la podrías poner en onload del body

<body onload="cargarFondo()">
    <table>
        <tr>
            <td><canvas width="440" height="450" id="canvas" onmousemove="pintar(event);" onmousedown="activar();" onmouseup="desactivar();"></canvas></td>
            <td class="herramientas">
                <div style="width: 10px; height: 10px;" onclick="stamano(3);"></div><br />
                <div style="width: 20px; height: 20px;" onclick="stamano(8);"></div><br />

                <input type="color" id="colores" onchange="scolor();"/>
                <a href="#" download="canvas.png" id="guardarimagen" onclick="href=canvas.toDataURL" >Guardar como imagen</a>
            </td>
        </tr>
    </table>
    <script>
        document.getElementById("guardarimagen").addEventListener("click", guardari, false);
    </script>
</body>

Espero eso solucione tu problema.

2
  • Amigo tu respuesta fue muy optima, por que ya puedo mostrar la imagen a traves de JavaScript como lo dices, pero a la hora de guardar, me aparece un mensaje en la pagina que dice : ' no se ha encontrado el archivo' Commented el 22 abr. 2019 a las 23:23
  • Pienso que eso se debe a que https://www.ejemplode.com no es el mimo dominó en el que está el archivo HTML en el que está tu canvas. Para que funcione correctamente, las imágenes deben estar alojadas en el mismo dominio.
    – ftorres
    Commented el 23 abr. 2019 a las 0:36
0

Varias observaciones:

  1. Necesitas iniciar el canvas y el contexto de este una sola vez. No lo hagas en una función. El canvas y el contexto son constantes: no cambian.

  2. Si necesitas que la imagen aparezca en el data uri píntala en el canvas. En este caso, como que la imagen se repite hay que utilizar patrones que los creas con ctx.createPattern

  3. He añadido a tu código una función que detecta la posición del ratón en el canvas. Tu método funciona solo si el canvas esta fijo en la esquina izquierda arriba de la ventana. Si lo pones en cualquier otro lugar ya no te cuadran las cosas.

  4. He cambiado un poco tu función guardari()porque no entiendo que es lo que quierias hacer. De todos modos: ahora guardari() crea una nueva imagen y la agrega al DOM. Tiene que aparecer debajo del canvas. Espero que sea útil.

// iniciar el canvas y el contexto de este solo una vez
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// dibujar la imagen en el canvas. Si necesitas repetirla la solución es utilizar un patrón
var patron = laImagen;
ctx.fillStyle = ctx.createPattern(patron,"repeat");
ctx.fillRect(0, 0,canvas.width,canvas.height );


var color = "#000000";
var tamano = 5;
var pintura = false;

function pintar(event) {
  if (pintura) {
    var m = oMousePos(canvas, event)
    ctx.fillStyle = color;
    ctx.fillRect(m.x - 10, m.y + 15, tamano, tamano);
  }
}

function activar() {
  pintura = true;
}

function desactivar() {
  pintura = false;
}

function scolor() {
  color = document.getElementById("colores").value;
}

function stamano(numero) {
  tamano = numero;
}
function guardari() {
  var canvas = document.getElementById("canvas");
  var imagen = canvas.toDataURL("image/png");
  var img = document.createElement("img")
  img.setAttribute("src",imagen);
  aquiLaImagen.appendChild(img)
}


function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { //objeto
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
}
}


guardarimagen.addEventListener("click", guardari)
canvas {
  border:1px solid;
  /*background-image: url(https://www.ejemplode.com/design/images/logo.jpg);*/
  }
  
  .herramientas {
    width: 100px;
  }
  
  .herramientas div {
    background-color: black;
  }
  
  .herramientas div:hover {
    border: solid red 1px;
  }
  
  .herramientas img:hover {
    border: solid red 1px;
  }
<table>
    <tr>
      <td><canvas width="440" height="450" id="canvas" onmousemove="pintar(event);" onmousedown="activar();" onmouseup="desactivar();">
     <img id="laImagen" src="data:image/jpeg;base64,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" alt="unEjemplo" />  
        
        
        </canvas></td>
      <td class="herramientas">
        <div style="width: 10px; height: 10px;" onclick="stamano(3);"></div><br />
        <div style="width: 20px; height: 20px;" onclick="stamano(8);"></div><br />

        <input type="color" id="colores" onchange="scolor();" />
        <a href="#" download="canvas.png" id="guardarimagen">Guardar como imagen</a>
      </td>
    </tr>
  </table>

<div id="aquiLaImagen"></div>

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.