Сохранить холст между pageloads

Question

Ive пытался сделать сохранение холста между обновлениями страницы, используя локальное хранилище html5, но при обновлении страницы холст всегда возвращается к пустому.

HTML

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

Javascript:

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 мб, а в других - меньше.

Еще одно предостережение состоит в том, что каждый сохраненный символ занимает 2 байта из-за уникодирования, поэтому хранилище на самом деле является лишь половиной этого в практическом смысле. Нет гарантии о размере, поскольку это не определено стандартом - 5 мб - это всего лишь предложение, поэтому браузеры могут использовать любой размер.

Вы получаете изображение как PNG, так как это формат по умолчанию toDataURL(). Если произведенный data-uri слишком велик (вероятно, здесь, поскольку base-64 добавляет 33% к размеру + небольшой заголовок), сохранение будет усекаться или сбой в зависимости от браузера.

Это, скорее всего, (поскольку вы не указываете размер холста или результирующие данные-uri), почему ваш холст пуст, когда вы пытаетесь перезагрузить data-uri, поскольку это было бы неверно.

Вы можете попытаться сохранить как JPEG вместо:

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

Если это не сработает, то вам нужно будет искать в другие местные механизмы хранения данных, таких как индексированных DB (где вы можете запросить квоту хранения) или File API (но в настоящий момент это поддерживается только в Chrome). Существует также устаревший веб-SQL, который будет существовать еще некоторое время.

Update

Также попробуйте переместить OnLoad из холста элемента окна:

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

Примечание: вы не можете установить src на холсте элемента (как идентификатор из кода здесь предложить а также пример кода). Для этого вам нужен элемент изображения. Когда вы установите 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. Он включает в себя немного больше кода на этапе рендеринга (который вам нужно, чтобы обновить холст, когда он по какой-то причине не используется), но он того стоит.