Форум

Valeriy__258 · #1 (**permalink**) 11.03.2019, 14:21

Добрый день. Хочу сделать так, чтобы рисунок в паинте(максимально простая программа) сохранялся при закрытии браузера. Я новичок в языках программирования, но нужно сдать по предмету эту работу, а я всё никак не могу понять, что я делаю не так ?
Пробовал разные переменные и кидал localStorage в разные места программы, но ничего не получается.
Кто объяснит профану, где он не прав? >_<

Dilettante_Pro · #2 (**permalink**) 11.03.2019, 14:51

Valeriy__258,
Что такое x, который вы хотите сохранить в localStorage?

Valeriy__258 · #3 (**permalink**) 11.03.2019, 15:14

Я не знаю, что за переменная там должна быть(
я хочу сохранить свой рисунок в окне канвас в localStorage, чтобы я закрывал браузер, а потом открывал - а рисунок сохранялся

Dilettante_Pro · #4 (**permalink**) 11.03.2019, 17:48

<canvas id = 'c1' width='400' height='200'></canvas>
<button id = 'save' >Save</button>
<img id = 'cImg' src = ''>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var myColor = 'black';
          var img = new Image();
          img.src =  localStorage.getItem('img');
          img.onload = function() {               
                ctx.drawImage(img, 0, 0);
          }
canvas.onmousedown = function() {
   canvas.onmousemove = function(e) {
       var x = e.offsetX,
             y = e.offsetY;
       ctx.fillStyle = myColor;
       ctx.fillRect(x - 5,y - 5,10,10);
   }
   canvas.onmouseup = function() {
      canvas.onmousemove = null;
   }
}
document.querySelector('#save').onclick = function() {
       var imageURI = canvas.toDataURL("image/jpg");
       localStorage.setItem('img',imageURI);
 //      document.querySelector('#cImg').src =  localStorage.getItem('img');
}
</script>

Valeriy__258 · #5 (**permalink**) 11.03.2019, 18:06

Сообщение от Dilettante_Pro

<canvas id = 'c1' width='400' height='200'></canvas>
<button id = 'save' >Save</button>
<img id = 'cImg' src = ''>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var myColor = 'black';
canvas.onmousedown = function() {
   canvas.onmousemove = function(e) {
       var x = e.offsetX,
             y = e.offsetY;
       ctx.fillStyle = myColor;
       ctx.fillRect(x - 5,y - 5,10,10);
   }
   canvas.onmouseup = function() {
      canvas.onmousemove = null;
   }
}
document.querySelector('#save').onclick = function() {
       var imageURI = canvas.toDataURL("image/jpg");
       localStorage.setItem('img',imageURI);
       document.querySelector('#cImg').src =  localStorage.getItem('img');
}
</script>

Круто!
Но мне нужно немного другое(
Нужно, чтобы изображение сохранялось в рабочем поле, т.е. я открыл себе программку в браузере, нарисовал что-то, потом закрыл её, открыл снова, и могу продолжать рисовать на том же рисунке

Dilettante_Pro · #6 (**permalink**) 11.03.2019, 18:34

Valeriy__258,
Изменил пример пост #4

Valeriy__258 · #7 (**permalink**) 11.03.2019, 19:04

Сообщение от Dilettante_Pro

Valeriy__258,
Изменил пример пост #4

Отлично, всё работает! Пытаюсь теперь добавить кнопку очистить через removeItem.
Можно ещё такой вопрос: почему у Вас весь код написан без тегов html, head и body?
Я попробовал раскидать всё в теги, script в head, а всё остальное в body, но код перестал работать(

Valeriy__258 · #8 (**permalink**) 11.03.2019, 20:16

Сообщение от Dilettante_Pro

Valeriy__258,
Изменил пример пост #4

Всё, добавил кнопку обновить и рамку, и всё работает!
Правда с тегами head и body и с их отсутствием не разобрался.. Наверняка, где-то ошибку сделал, поэтому ничего не работает
Спасибо ещё раз!

Dilettante_Pro · #9 (**permalink**) 12.03.2019, 10:38

Сообщение от Valeriy__258

почему у Вас весь код написан без тегов html, head и body?

Потому что здесь песочница умная и сама добавляет чего не хватает - можете посмотреть в консоли.
Вот вариант с html, head, body.

<!DOCTYPE html>
<html>
   <head>
      <script>
         window.addEventListener('load', function () {
            var canvas = document.getElementById('c1');
            var ctx = canvas.getContext('2d');
            var myColor = 'black';
            var img = new Image();
            img.src =  localStorage.getItem('img');
            img.onload = function() {               
                ctx.drawImage(img, 0, 0);
            }
            canvas.onmousedown = function() {
               canvas.onmousemove = function(e) {
                   var x = e.offsetX,
                         y = e.offsetY;
                   ctx.fillStyle = myColor;
                   ctx.fillRect(x - 5,y - 5,10,10);
               }
               canvas.onmouseup = function() {
                   canvas.onmousemove = null;
               }
            }
            document.querySelector('#save').onclick = function() {
                var imageURI = canvas.toDataURL("image/jpg");
                localStorage.setItem('img',imageURI);
            }
         });
      </script>
   </head>
   <body>
      <canvas id = 'c1' width='400' height='200'></canvas>
      <button id = 'save' >Save</button>
   </body>
</html>

SuperZen · #10 (**permalink**) 12.03.2019, 13:33

Автосохранение %)

<!DOCTYPE html>
<html>

<head>
  <script>
    (function () {
      let canvas = null
      document.addEventListener('DOMContentLoaded', function () {
        canvas = document.getElementById('c1')
        var ctx = canvas.getContext('2d');
        var myColor = 'black';
        let localStorageImage = localStorage.getItem('img')
        console.log('localStorageImage', localStorageImage)
        if (localStorageImage) {
          var img = new Image();
          img.src = localStorageImage;
          img.onload = function () {
            ctx.drawImage(img, 0, 0);
          }
        }
        canvas.onmousedown = function () {
          canvas.onmousemove = function (e) {
            var x = e.offsetX,
              y = e.offsetY;
            ctx.fillStyle = myColor;
            ctx.fillRect(x - 5, y - 5, 10, 10);
          }
          canvas.onmouseup = function () {
            canvas.onmousemove = null;
          }
        }

        document.getElementById('clear').addEventListener('click', function () {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          localStorage.removeItem('img')
        })
      });
      window.onunload = function () {
        if (canvas) {
          var imageURI = canvas.toDataURL("image/jpg");
          localStorage.setItem('img', imageURI);
        }
        return null
      };
    })()
  </script>
</head>

<body>
  <canvas id='c1' width='400' height='200'></canvas>
  <button id='clear' type='button'>clear</button>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript