Zapisywanie html5 Canvas jako danych do bazy danych mysql

Question

To może nie być możliwe, byłoby po prostu idealne dla mojej sytuacji. Używam płótna html5 jako prezentera slajdów, który użytkownik może narysować i zapisać na swoim lokalnym komputerze.

Moim celem jest zamiast tego zapisać to w naszej bazie danych w jakiś inny sposób.

Co chcę się zdarzyć:

Obciążenia płócienne się slajd i użytkownik następnie można wyciągnąć z niego. Po zapisaniu, zapisuje dane linii do komórki w naszej bazie danych. Gdy użytkownik ponownie się zaloguje, aby zobaczyć slajd, wyświetli oryginalny slajd z adnotacjami, a następnie przeciągnięty na niego.

Korzystając z tej metody, nie będę musiał przechowywać tysięcy obrazów dla każdej wyjątkowej osoby i będą one mogły usuwać wcześniejsze adnotacje bez usuwania oryginalnego slajdu.

Oto mój kod do wysyłania:

Płótno:

<input type="button" id="savepngbtn" value="Save Slide"> 

<!-- Main Canvas/Main Slide --> 
<div id="main"><canvas id="drop1" class="drop" style=" background-repeat:no-repeat;" width="680" height="510"></canvas></div> 

Ciągnięcie Original Image:

var img = new Image(); 
img.src = 'pdf_images/pdf-save-0.png'; 
img.onload = function() { 
    oCtx.drawImage(img, 0, 0) 
} 

czego potrzebuję:

• Zapisuj funkcji/funkcji zapisać linie utworzone jako dane do pliku baza danych
• Kod do przesłania danych i wyświetlenia go na obszarze roboczym, tak jak został wcześniej utworzony.

Nie jestem pewien, czy jest to możliwe, ale człowiek byłby naprawdę miły i oszczędzający życie! Dzięki!

Answer 1

Domyślnie płótno jest przezroczyste, dzięki czemu można je łatwo umieścić na innych obrazach i narysować na nim.

Użyj canvas.toDataURL(), aby uzyskać kodowanie PNG w formacie base64. Możesz zapisać to w swojej bazie danych. Możesz przesłać dane na serwer za pomocą zwykłego post-request. Następnie możesz go przywrócić, pobierając dane z twojego katalogu db i ustawiając je jako src elementu Obraz i zapisując obraz z powrotem na płótnie, używając kontekstu drawImage na płótnie 2d.

Możesz także nagrać każdy podsiew, który użytkownicy pobierają i zapisać w bazie danych. Podczas ładowania strony można po prostu przerysować obrysy.

Answer 2

Chociaż celem jest przechwytywanie podpisów, jestem pewien, że projekt Thomasa J Bradleya Signature Pad miałby użyteczne informacje i próbki kodu do zapisywania i regenerowania przechwyconych rysunków.