¿Cómo manipular el elemento canvas en HTML5?

Considere si hay dos cuadros en cada lado, los cuadros tendrán 5 entradas cada uno, los cuadros de la izquierda tienen nombres de animales como perro, gato, tigre, elefante, mono. El derecho tendrá leche,cabra,coco,huesos,plátano.

Ahora usando el canvas element necesito mapear estos 2 elementos de cuadro y guardar el resultado en Database y también necesito recuperarlo la próxima vez.

¿Cómo implemento este?

Gracias de antemano ..

preguntado el 31 de julio de 12 a las 10:07

1 Respuestas

Si desea guardar su lienzo en una base de datos, deberá convertir el lienzo en una cadena Base64 y luego guardar esta cadena en la base de datos de esta manera:

<input type="text" name="mybase64" />

<script type="text/javascript">
    function saveClicked() {
        var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/jpeg");
        $("input[name=\"mybase64\"]").val(dataURL);
    }
</script>

Luego publicarás esto mibase64 a cualquier servicio web / código detrás de la página que se recibirá y escriba esta cadena en su medio de almacenamiento. Para volver a dibujar la imagen en el lienzo, obtendría su cadena base64 de su base de datos y la escribiría en el lienzo de esta manera:

function drawCanvas(myBase64String) {
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = myBase64String;
    image.onload = function() {
        context.drawImage(image, 0, 0);
    }
}

La respuesta principal a su pregunta es, si desea almacenar su lienzo en una base de datos, DEBE hacerse en forma base64.

Respondido 31 Jul 12, 10:07

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