在頁面加載之間保存畫布

Question

我一直試圖使用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沒有在畫布上工作

Answer 1

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中。它在渲染階段涉及更多的代碼（無論如何，當它由於某種原因被空白時，更新畫布）是值得的。