保存html5畫布作爲數據到mysql數據庫

這可能是不可能的，它只是非常適合我的情況。我使用html5畫布作爲幻燈片演示者，用戶可以使用它並將其保存到本地機器上。保存html5畫布作爲數據到mysql數據庫

我的目標是改爲以某種不同的方式將其保存到我們的數據庫中。

我希望發生什麼：

畫布負荷高達幻燈片，然後用戶可以在其上繪製。一旦保存，它會將行的數據保存到數據庫中的單元格中。當用戶重新登錄以查看幻燈片時，它會顯示帶有註釋的原始幻燈片，然後將其放在頂部。

使用此方法，我不必爲每個獨特人員存儲數千張圖像，他們將能夠在不擦除原始幻燈片的情況下擦除過去的註釋。

這裏是我上傳的代碼：

帆布：

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

拉動原始圖像：

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

我需要什麼：

的保存特性/功能將創建的行保存爲數據數據庫
上載數據並將其顯示在畫布上的代碼。

我不確定這是否有可能，但是男人它真的很好，並且可以挽救生命！謝謝！

來源

2011-10-26 Dom

只是我的2美分，但除非你使用的數據庫是專門設置爲優化節省大斑點，那麼我會遠離保存圖像數據在該數據庫...如果你使用的MySQL，那麼你絕對不應該'將它存儲在那裏，它會比將它保存到HD並存儲文件名要慢得多。 –

畫布在默認情況下是透明的，所以您可以輕鬆地將其放在其他圖像的頂部並在其上繪製。

使用canvas.toDataURL()獲取畫布的base64編碼PNG。您可以將其保存到數據庫中。您可以使用普通的後請求將數據發送到服務器。然後，您可以通過從數據庫中檢索數據並將其設置爲Image元素的src並使用canvas2d上下文中的drawImage將圖像寫回到畫布來恢復它。

或者您可以記錄用戶繪製的每個流行音樂並將其保存在數據庫中。加載頁面時，您可以重新繪製筆畫。

來源

2011-10-26 16:29:32 Epeli

雖然它旨在捕獲簽名，但我確信Thomas J Bradley的Signature Pad項目將具有一些有用的信息和代碼示例，用於保存和重新生成所捕獲的圖形。

來源

2011-10-26 16:46:55 JustinStolle

保存html5畫布作爲數據到mysql數據庫

回答

相關問題