Сохранить холст между загрузками страниц

Question

Сохранить холст между загрузками страниц

0

Я пытался сделать сохранение холста между обновлениями страницы, используя локальное хранилище 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 не работал в холсте

uzr 16 дек. 2013, в 00:55

Источник

0

Что ты рисуешь на холсте? Возможно, вы могли бы сериализовать команды рисования, а не сохранять холст как изображение.
markE 15 дек. 2013, в 23:43
0

Мне бы очень хотелось сохранить их как изображения, не проблема там, просто загрузить изображение обратно на холст после перезагрузки страницы
uzr 15 дек. 2013, в 23:54

Теги:

javascript

html

html5

canvas

1 ответ

Ещё вопросы

Что ты рисуешь на холсте? Возможно, вы могли бы сериализовать команды рисования, а не сохранять холст как изображение.
Мне бы очень хотелось сохранить их как изображения, не проблема там, просто загрузить изображение обратно на холст после перезагрузки страницы

epistemex · Accepted Answer · 2013-12-15T21-38-00.000Z

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

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

Обновить

Также попробуйте перенести свою загрузку с элемента canvas в окно:

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

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

Я не думаю, что размер - проблема, хотя я только пытаюсь сохранить для примера 2-3 маленьких одноцветных круга на холсте. В консоли я вижу, что он был сохранен в локальном хранилище, но он не загружается, что-то не так в моем коде?
Даже если то, что вы рисуете, не является сложным, если размер рисунка большой, он, вероятно, займет много места в локальном хранилище. Вы должны взглянуть на предложение @ markE, особенно если ваш рисунок прост.
@LuddeAndersson Я обновил ответ расширенным решением