Cómo establecer la imagen de fondo de un lienzo html 5 en la imagen .png

Me gustaría saber cómo es posible establecer la imagen de fondo de un lienzo en un archivo .png. No quiero agregar la imagen en la parte posterior del lienzo y hacer que el lienzo sea transparente.Cómo establecer la imagen de fondo de un lienzo html 5 en la imagen .png

Quiero que el usuario pueda realmente dibujar en ese lienzo con el fondo siendo la imagen .png para que pueda extraerlo más tarde como .png con los dibujos que realizó el usuario.

Fuente

2011-03-09 Farzad Towhidi

Puede dibujar la imagen en el lienzo y dejar que el usuario dibuje encima de eso.

La función drawImage() le ayudará con eso, ver https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

Fuente

2011-03-09 09:31:41 oberhamsi

Esto requiere que el usuario registre los comandos de dibujo del usuario y 'replay' ellos en un lienzo en blanco para extraer los resultados backgroundless. Es mucho más fácil simplemente no dibujar la imagen de fondo en primer lugar para que pueda extraer el resultado sin problemas. – Phrogz

de hecho sería. de alguna manera me perdí la última frase de su pregunta o lo agregó? – oberhamsi

Como se muestra en this example, se puede aplicar un fondo a través de un elemento canvas CSS y este fondo no se considera parte de la imagen, por ejemplo, al recuperar los contenidos a través de toDataURL().

Éstos son los contenidos del ejemplo, por desbordamiento de pila posteridad:

<!DOCTYPE HTML> 
<html><head> 
    <meta charset="utf-8"> 
    <title>Canvas Background through CSS</title> 
    <style type="text/css" media="screen"> 
    canvas, img { display:block; margin:1em auto; border:1px solid black; } 
    canvas { background:url(lotsalasers.jpg) } 
    </style> 
</head><body> 
<canvas width="800" height="300"></canvas> 
<img> 
<script type="text/javascript" charset="utf-8"> 
    var can = document.getElementsByTagName('canvas')[0]; 
    var ctx = can.getContext('2d'); 
    ctx.strokeStyle = '#f00'; 
    ctx.lineWidth = 6; 
    ctx.lineJoin = 'round'; 
    ctx.strokeRect(140,60,40,40); 
    var img = document.getElementsByTagName('img')[0]; 
    img.src = can.toDataURL(); 
</script> 
</body></html>

Fuente

2011-03-09 15:55:06 Phrogz

¿Hay alguna manera de que el fondo CSS se considere ** parte de la imagen **? Estaba intentando ayudar a este [desbordamiento compañero] (http://stackoverflow.com/a/21835070/607874) –

@JoseRuiSantos No, no a través de CSS. Tendría que 'dibujarImage()' en el lienzo para que sea parte de él. – Phrogz

Eso es lo que yo pensaba. Como puede ver en el enlace, estoy tratando con el contenido generado en tiempo de ejecución '-moz-element', por lo que no hay forma de" obtener "esta imagen, me temo. De todas formas, gracias por la ayuda. –

le puede dar la imagen de fondo en CSS:

#canvas { background:url(example.jpg) }

se mostrará la imagen de tierra

que de lona de vuelta

Fuente

2012-08-28 07:27:56 user1325775

Puede usar este complemento, pero para fines de impresión he agregado un código como <button onclick="window.print();">Print</button> y para guardar la imagen <button onclick="savePhoto();">Save Picture</button>

 function savePhoto() { 
    var canvas = document.getElementById("canvas"); 
    var img = canvas.toDataURL("image/png"); 
    window.location = img;}

pago y envío este plugin http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app

Fuente

2013-06-12 07:43:12 Raza

Cómo establecer la imagen de fondo de un lienzo html 5 en la imagen .png

Respuesta

Cuestiones relacionadas