如何在html5中獲取已編輯畫布的html文件

我正在嘗試製作一個網站，幫助其用戶通過在畫布上拖放元素來創建頁面。用戶應該能夠保存編輯畫布的html文件。我無法確定如何將對畫布所做的更改轉換爲HTML文件。如何在html5中獲取已編輯畫布的html文件

來源

2014-01-10 Soham Dutta

我不認爲有可能從畫布中獲取標記。我已經搜索了一個月，但找不到有效的解決方案。但可能有些專家可能知道。祝你好運哥們。

來源

2014-01-10 12:41:09 Vignesh

畫布基本上只是一個位圖圖像。無論你在畫布上繪製什麼，都以像素而不是元素的形式存儲。所以對畫布的改變只是像素值的改變。做你希望你需要將你的'元素'作爲'對象'存儲在你的代碼中，每個'對象'存儲你的'元素'所需的所有數據。

它這樣纔有可能打開一個新的窗口，並出口代碼到它使用document.writeln

下面的代碼可能會給你會需要什麼東西排序想法

newwindow=window.open('','_blank'); 
newwindow.document.writeln('<!DOCTYPE HTML>'); 
newwindow.document.writeln('<html>'); 
newwindow.document.writeln('<head>'); 
newwindow.document.writeln('<style>'); 
newwindow.document.writeln('#element0 {'); 
newwindow.document.writeln('background:'+ obj0.background+';'); 
newwindow.document.writeln('width:'+ obj0.width+';'); 
newwindow.document.writeln ('}'); 
newwindow.document.writeln('</style>'); 
newwindow.document.writeln('</head>'); 
newwindow.document.writeln('<body>'); 
newwindow.document.writeln('<div id="element0"></div>'); 
newwindow.document.writeln('</body>'); 
newwindow.document.writeln('</html>'); 
newwindow.document.writeln('<html>'); 
newwindow.document.close();

希望這有助於

來源

2014-01-10 18:05:49 jing3142

畫布不會幫助你在這裏除了可視化你已經放在它上面的物體。

您需要將場景類型後面的「陰影」結構中放置的對象記錄下來。也就是說：從它

原始的HTML代碼它

帆布可視化：在內部建立一個對象列表，您這時可利用作爲源數據來呈現。

例如，你可以在圖片拖放到畫布，你的代碼將記錄一個新的對象（用下面的代碼的意圖是顯示原則上不提供全面有效的解決方案）：

var myObjects = []; 

/// a drop occurred 
var o = new myElement(x, y, width, height, id, type);

myElement是您預先設置的預定義對象，用於保存給定的參數。

然後物體推到你的對象堆棧，使它對帆布：

myObjects.push(o); 

for(var i = 0, o; o = myObjects[i]; i++) { 
    /// draw the look of this object here to canvas 
}

然後，當您需要它的HTML版本，你做的一樣：

for(var i = 0, o; o = myObjects[i]; i++) { 
    var el = '<' + o.type + ' id="' + o.id + ' .... other things here 
}

這種方式可以產生畫布圖形，HTML，通過套接字發送數據等。

這些東西的關鍵是保持原始基礎數據可用樂。在這種情況下，它將是您要刪除的元素類型，其位置和維度。對於HTML，你也必須考慮嵌套等問題，但這需要比這裏顯示的代碼多一點。

來源

2014-01-10 22:34:57 K3N

如何在html5中獲取已編輯畫布的html文件

回答

相關問題