limpiar Canvas y guardar Canvas

Estoy terminando la aplicación web para el análisis de imágenes y la pintura. Y necesito ayuda con el lienzo. Esto es lo que hago:

EDIT:

    <img id="imgEdit" src="<?php echo $imagename; ?>" border="0">
    <canvas id="canvasPaint" 
        width="<?php echo $width; ?>" 
        height="<?php echo $height; ?>"> 
    </canvas>
    <input type="button" value="Clear" onClick="clearCanvas();" class="button">
<input type="button" value="Save" onClick="saveViaAJAX();" class="button">
    <div id="debugFilenameConsole">Wait for a while after clicking the button and the filename of the image will be shown to you.  </div>

Pero ahora tengo un problema con la función clearCanvas. Porque los navegadores no pueden leer la propiedad 'ancho'. Este es mi código fuente completo. ¿Cómo, por favor, alguien puede decirme qué estoy haciendo mal?

EDIT:

function clearCanvas()
                {
                var theCanvas = document.getElementById("canvasPaint"); 
                if (theCanvas && theCanvas.getContext) {
                    var ctx = theCanvas.getContext("2d");
                    if (ctx) {

                    ctx.clearRect(0, 0, <?php echo $width; ?>, <?php echo $height; ?>);

                    var srcImg = document.getElementById("imgEdit");
                    ctx.drawImage(srcImg, 0,0);

                    clickX = new Array();
                    clickY = new Array();
                    clickDrag = new Array();
                }}}
function saveViaAJAX()
{
    var theCanvas = document.getElementById("canvasPaint");  
    var canvasData = theCanvas.toDataURL("image/jpg");
    var postData = "canvasData="+canvasData;

    var ajax = new XMLHttpRequest();
    ajax.open("POST",'canvasSave.php',true);    
    ajax.setRequestHeader('Content-Type', 'canvas/upload');

    ajax.send(postData);  
}

Necesito guardar el lienzo como imagen jpeg en el disco local después de que el usuario haga clic en 'guardar imagen'. Eso es malo, las áreas que son transparentes en el lienzo se convierten en fondo negro.

Necesito algo como esto: http://i48.tinypic.com/2w5vhpv.jpg

preguntado el 27 de julio de 12 a las 19:07

¿Puedes publicar las declaraciones de ctx y canvas, y donde se declaran en relación con clearCanvas? -

Usando ambos clearRect y width es superfluo Dicho esto, ¿cuál es el valor de canvas? -

Resuelvo mi problema. Edito mi publicación y proporciono el código fuente. -

1 Respuestas

Puede guardar el lienzo en un archivo de imagen con el canvas.toDataUrl('image/jpg').

Con respecto a la primera pregunta: normalmente limpias el lienzo con context.clearRect(0, 0, canvas.width, canvas.height) método. Dicho esto, su código debería funcionar como se espera si las declaraciones de lienzo y contexto se han realizado correctamente.

Respondido 28 Jul 12, 07:07

la función clearCanvas() y la función saveViaAJAX() no funcionan. ¿Podrías ayudarme? - Sacar de quicio

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.