在頁面加載之間保存畫布

我一直試圖使用html5本地存儲在頁面刷新之間進行畫布保存，但是當我刷新頁面時，畫布始終回到空白狀態。在頁面加載之間保存畫布

HTML

  <canvas onload="loadCanvas()" onClick="canvas(event)" id="myCanvas" width="400" height="400"> 
       Your browser does not support the canvas element 
      </canvas>

的Javascript：如果有什麼東西在畫布

任何人都知道是什麼問題了drawed

function saveCanvas() { 
var c = document.getElementById("myCanvas"), 
    ctx = c.toDataURL(); 

if (typeof (localStorage) !== "undefined") { 

    localStorage.setItem('myCanvas', ctx); 
} else { 
    document.getElementById("save").innerHTML.dataURL = "Local Storage not supported"; 
} 
} 

function loadCanvas() { 

var image = localStorage.getItem('myCanvas'); 

document.getElementById('myCanvas').src = image; 
}

saveCanvas函數被調用？

它已經解決了，的onLoad沒有在畫布上工作

來源

2013-12-15 uzr

你在畫布上畫什麼？也許你可以序列化繪圖命令，而不是將畫布保存爲圖像。 – markE

我真的想把它們保存爲圖像，沒有問題，只是在頁面重新加載後將圖像加載回畫布 – uzr

localStorage的只能保存這麼多，即。在大多數瀏覽器中爲5 MB，而在其他瀏覽器中則更少。

另一個需要注意的是每個字符存儲需要2個字節由於unicoding因此存儲實際上只是這個實際意義上的一半。沒有關於尺寸的保證，因爲這不是標準所定義的 - 5 MB只是一個建議，所以瀏覽器可以使用任何尺寸。

您將以PNG形式獲取圖像，因爲這是默認格式toDataURL()。如果生成的data-uri太大（這可能是因爲base-64在大小+小頭部中增加了33％），則根據瀏覽器的不同，保存會截斷或失敗。

這很有可能（因爲您沒有指定畫布的大小或生成的數據 - uri）當您嘗試重新載入數據時，爲什麼畫布是空白的 - 因爲它是無效的。

你可以嘗試保存爲JPEG代替：

dataUri = c.toDataURL('image/jpeg', 0.5); /// 0.5 is quality, higher is better

如果不工作，那麼你就需要考慮其它本地存儲機制，如索引數據庫（在這裏你可以請求存儲配額）或File API（但此時僅支持Chrome）。還有一些已棄用的Web SQL將在一段時間內出現。

更新

也試圖從canvas元素的onload事件移到窗口：從你的代碼中不能設置一個canvas元素上src（如ID在這裏建議：

window.onload = function() { 
    var image = localStorage.getItem('myCanvas'); 
    document.getElementById('myCanvas').src = image; 
}

注以及您的示例代碼顯示）。你需要一個圖像元素。當您設置一個src的圖像上還需要使用onload處理器在圖像上，所以一個例子可以是：

window.onload = function() { 
    var img = new Image; 
    img.onload = function() { 
     var ctx = document.getElementById('myCanvas').getContext('2d'); 
     ctx.drawImage(img, 0, 0); 
     /// call next step here... 
    } 
    img.src = localStorage.getItem('myCanvas'); 
}

通常我建議（和其他人在這個線程確實做了）的人保存他們的圖紙將數組中的點和形狀類型作爲對象序列化爲一個字符串，然後將其存儲在localStorage中。它在渲染階段涉及更多的代碼（無論如何，當它由於某種原因被空白時，更新畫布）是值得的。

來源

2013-12-15 23:25:35 K3N

我不認爲尺寸是問題，儘管我只是試圖保存一個例子2-3小一個畫布上的彩色圓圈。在控制檯中，我看到它已被保存到本地存儲，但它不會加載，我的代碼中是否有錯誤？ – uzr

即使您繪製的內容並不複雜，但如果繪圖的大小很大，本地存儲中可能佔用大量空間。你應該看看@ markE的建議，特別是如果你的繪圖很簡單。 –

@LuddeAndersson我用擴展的解決方案更新了答案 – K3N

在頁面加載之間保存畫布

回答

相關問題