HTML canvas saving on mysql database

Question

I'm stuck with my code.

Problem: I have canvas and inside it I draw the lines. And after I finished I want that lines to stay in the right place where i left that(before reload website). So I need to send that canvas to mysql data base. But here I stuck. Did I first need to create .png image and then try to send that image information to database? or somehow I can send it right off from code to database by using AJAX? I read a lot of information and I am confused right now.

If I will use method HTMLgetImageData() and HTMLputImageData() then I need to create some real image in my server? or I can take straight from the canvas? and send to mysql databse? :)

so now I have Canvas in html and some script for drawing the lines:

$(".widget_body").on("mousedown", "canvas", function() {

    var id = $(this).attr("id");
    var canvas = document.getElementById(id);
    var canvas,
        context,
        dragging = false,
        dragStartLocation,
        snapshot;

    fitToContainer(canvas);

    function fitToContainer(canvas){
      // Make it visually fill the positioned parent
      canvas.style.width ='100%';
      canvas.style.height='100%';
      // ...then set the internal size to match
      canvas.width  = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }


    function getCanvasCoordinates(event) {
        var x = event.clientX - canvas.getBoundingClientRect().left,
            y = event.clientY - canvas.getBoundingClientRect().top;

        return {x: x, y: y};
    }

    function takeSnapshot() {
        snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
    }

    function restoreSnapshot() {
        context.putImageData(snapshot, 0, 0);
    }


    function drawLine(position) {
        context.beginPath();
        context.moveTo(dragStartLocation.x, dragStartLocation.y);
        context.lineTo(position.x, position.y);
        context.stroke();
    }

    function dragStart(event) {
        dragging = true;
        dragStartLocation = getCanvasCoordinates(event);
        takeSnapshot();
    }

    function drag(event) {
        var position;
        if (dragging === true) {
            restoreSnapshot();
            position = getCanvasCoordinates(event);
            drawLine(position);
        }
    }

    function dragStop(event) {
        dragging = false;
        restoreSnapshot();
        var position = getCanvasCoordinates(event);
        drawLine(position);
    }

    function clearCanvas(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }


    context = canvas.getContext('2d');
    context.strokeStyle = 'purple';
    context.lineWidth = 4;
    context.lineCap = 'round';

    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);
    canvas.addEventListener('dblclick', clearCanvas, false);
    });

Maybe somebody can suggest something to me? Maybe something about next steps?What should I have to do from this moment?

Answer 1

1. You could save the coordinates in a database without reloading the page using AJAX and then fetch the coordinates via AJAX and set them dynamicly in the Javascript. If you want to use a JS Library that makes AJAX-requests easier to use, I recommend jQuery http://api.jquery.com/jquery.ajax/

2. You could convert the canvas to an image using something like

function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}

And then save the image in a database. However, you won't be able to change the canvas this way, it will be an image. The first way allows you to save the canvas as it is with it's information. Kind of like Photoshop and a .PSD file.