Question

Consider if two boxes on each side, the boxes will have 5 entries each, the left boxes we have animal names like dog,cat,tiger,elephant,monkey. The right will have milk,goat,coconut,bones,banana.

Now using the canvas element i need to map these 2 box elements and save the result in Database and i need to retrieve it again the next time as well.

How do i implement this one?

Thanks in advance..

Answer 1

If you want to save your canvas to a database, then you’ll need to convert the canvas to a Base64 string and then save this string to the database like this:

<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>

You will then post this mybase64 to whatever web service / code behind page that will received and write this string to your storage medium. To redraw the image to the canvas, you would get your base64 string from your DB and write it to the canvas like this:

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);
    }
}

The main answer to your question is, if you want to store your canvas to a database it MUST be done in base64 form.