CODEWITHSUNDEEP
javascriptphpmysqlcanvashtml5-canvas
Skyluk
Skyluk

Reputation: 69

HTML canvas saving on mysql database

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?

Upvotes: 2

Views: 5112

Answers (3)

Lewis
Lewis

Reputation: 14926

Firstly, you should use Canvas.toDataURL export the data. After that, you can send the data with a FormData via Fetch API.

var fd = new FormData();
fd.append('field', canvas.toDataURL('image/jpg'), 'sketch.jpg');
fetch('/saveSketch', {
  method: 'POST',
  body: fd,
});

On server side, you need to parse this FormData to retrieve the file. At this time, your files are already available for being saved into database or filesystem.

Upvotes: 1

Petter Pettersson
Petter Pettersson

Reputation: 377

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.

Upvotes: 1

delete me
delete me

Reputation: 800

Well, it depends on whether you're saving the Canvas as a single image or if you're saving each component of it (such as lines, squares, etc).

If you're saving it as a single image, it will be easier to just save the Data URL to your database. Otherwise, create JavaScript objects containing the properties and values of each shape, e.g.:

var line =
{
    Name: "Line",
    Color: "#3D4AEE",
    Shadow: "NULL"
    Length: "",
    Point: "130, 120"
}

Then convert the object into a JSON String:

var JSONLine = JSON.stringify(line);

Now you have something you can insert into the database.

Now, when you need to retrieve this from the database, so you can redraw it in the browser, all you need to do is lookup the "design", get all the bits that make up that design and redraw them to the Canvas, using the properties of the shapes that you saved.

I'll leave it up to you to figure out how to structure your database to accommodate the different types of shapes, and their relationships to "designs" that are created.

Upvotes: 2

Related Questions