HTML Canvas speichern auf MySQL-Datenbank

Question

Ich bin mit meinem Code fest.

Problem: Ich habe Leinwand und drinnen zeichne ich die Linien. Und nachdem ich fertig bin, möchte ich, dass die Zeilen am richtigen Ort bleiben, wo ich das gelassen habe (vor dem Laden der Website). Also muss ich diese Leinwand an die MySQL-Datenbank senden. Aber hier bin ich geblieben. Muss ich zuerst .png image erstellen und dann versuchen, diese Bildinformationen an die Datenbank zu senden? oder irgendwie kann ich es direkt von Code zu Datenbank senden, indem ich AJAX verwende? Ich lese viele Informationen und bin gerade verwirrt.

Wenn ich die Methode HTMLgetImageData() und HTMLputImageData() verwenden werde, dann muss ich ein echtes Bild auf meinem Server erstellen? oder kann ich direkt von der Leinwand nehmen? und an mysql-Datenbank senden? :)

so jetzt habe ich Canvas in HTML und einige Skript zum Zeichnen der Linien:

$(".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); 
    }); 

Vielleicht etwas zu mir vorschlagen jemand kann? Vielleicht etwas über die nächsten Schritte, was muss ich von diesem Moment an machen?

Answer 1

1. Sie können die Koordinaten in einer Datenbank speichern, ohne die Seite mit AJAX neu zu laden und dann die Koordinaten über AJAX holen und dynamisch im Javascript einstellen. Wenn Sie eine JS-Bibliothek verwenden möchten, die einfacher AJAX-Anfragen zu bedienen ist, empfehle ich jQuery http://api.jquery.com/jquery.ajax/

2. Sie konnten die Leinwand zu einem Bild konvertieren so etwas wie

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

und anschließend speichern das Bild in einer Datenbank. Allerdings können Sie die Leinwand auf diese Weise nicht ändern, es wird ein Bild sein. Der erste Weg ermöglicht es Ihnen, den Canvas so zu speichern, wie er ist mit seinen Informationen. So ähnlich wie Photoshop und eine .PSD-Datei.

Answer 2

Nun, es hängt davon ab, ob Sie den Canvas als einzelnes Bild speichern oder wenn Sie jede Komponente davon speichern (z. B. Linien, Quadrate usw.).

Wenn Sie es als einzelnes Bild speichern, ist es einfacher, die Daten-URL in Ihrer Datenbank zu speichern. Erstellen Sie andernfalls die Eigenschaften und Werte jeder Form JavaScript-Objekte enthalten, z.B .:

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

dann das Objekt in ein JSON-String konvertieren:

var JSONLine = JSON.stringify(line); 

Jetzt haben Sie etwas, das Sie in die Datenbank einfügen.

Jetzt, wenn Sie dies aus der Datenbank abrufen müssen, so dass Sie es im Browser neu zeichnen können, alles, was Sie tun müssen, suchen Sie das "Design", erhalten Sie alle Bits, die das Design und neu zu zeichnen Canvas mit den Eigenschaften der von Ihnen gespeicherten Shapes.

Ich überlasse es Ihnen, herauszufinden, wie Sie Ihre Datenbank strukturieren, um die verschiedenen Arten von Formen und ihre Beziehungen zu "Designs" zu berücksichtigen, die erstellt werden.

Answer 3

Zuerst sollten Sie Canvas.toDataURL verwenden, um die Daten zu exportieren. Danach können Sie die Daten mit einem FormData über Fetch API senden.

Auf Serverseite müssen Sie diese FormData analysieren, um die Datei abzurufen. Zu diesem Zeitpunkt sind Ihre Dateien bereits für das Speichern in der Datenbank oder im Dateisystem verfügbar.