Переписать существующий HTML с данными LocalStorage и сохранить состояние приложения даже после перезапуска - Android Javascript Cordova - PullRequest
Новая
       12

Переписать существующий HTML с данными LocalStorage и сохранить состояние приложения даже после перезапуска - Android Javascript Cordova

0 голосов
/ 16 июня 2019

Cordova Mobile App с использованием Javascript

Index.html, содержащий несколько img элементов с "src" , указывающими на WWW / IMG папку приложения.

Таким образом, страница загружается с несколькими существующими изображениями.

Пользователи могут длительное нажатие (библиотека tocca.js) на каждом изображении, чтобы открыть камеру устройства (плагин камеры Cordova), сделать фотографию и заменить полученное изображение вновь сделанной фотографией. (src изменяется с путем localStorage) . 

<img class="imagecl" src="img/a cuddly toy.png">

заменяется на 

<img class="imagecl" src="file:///data/user/0/com.aacproject.mirel/files/files/MyAppFolder/1560707846571.jpg">

Он отлично работает в текущем сеансе, но после перезапуска приложения исходный HTML снова возвращается с предыдущим существующим img src (который поставляется с кодом).

Я попытался сохранить фотографию в localStorage, а также переместить ее в LocalFileSystem.PERSISTENT, и она сразу же заменит существующее изображение, которое было нажато.

Но когда я закрываю приложение, изображение с моего начального img src отображается снова, а фотография пользователя исчезает.

Фотография, сделанная пользователем, отображается только в текущем состоянии (или сеансе), а не после перезапуска приложения.

Я пытался использовать плагин SQLite, получил "итератор getter not callable" ошибки, я не очень хорошо знаком с базами данных, но я решил, что мне нужен только столбец изображений, поэтому стол не имеет особого смысла. Я не использую какой-либо сервер. Приложение загружает изображения через HTML из папки WWW / IMG , каждый источник изображения был заполнен относительным путем к папке WWW / IMG .

Каким-то образом я хочу сохранить сделанные пользователем фотографии и переписать существующий HTML, чтобы при загрузке приложения оно загружалось с переписанным HTML. Я думал, что использование localStorage будет работать ... но, похоже, это не так. Либо я поступаю неправильно, либо мне не хватает какого-то ключевого компонента.

HTML 

<head> 
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover, user-scalable=no">
</head>

<body>
[...]                                  
  </div>
  <div class="image">
      <img class="imagecl" src="img/a cuddly toy.png"/>
   </div>
   <div class="image">
      <img class="imagecl" src="img/a kind of.png"/>
   </div>
   <div class="image">
      <img class="imagecl" src="img/a part.png"/>
   </div>  
[...]
</body>

Javascript

Только LocalStorage - FILE_URI 

imageCLarray.forEach(image => {
      image.addEventListener('longtap', () => {
                navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,
                destinationType: Camera.DestinationType.FILE_URI
                });

           function onSuccess(imageURI) {
           window.localStorage.setItem('imagepath', imageURI)                
           image.setAttribute("src", window.localStorage.getItem('imagepath'))
           }

           function onFail(message) {
                   alert('Failed because: ' + message);
           }
      })     
})

Только LocalStorage - DATA_URL 

imageCLarray.forEach(image => {
      image.addEventListener('longtap', () => {
                navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,
                destinationType: Camera.DestinationType.DATA_URL
                });

           function onSuccess(imageData) {
           var base64imageData = "data:image/jpeg;base64," + imageData; 
           window.localStorage.setItem('imagepath', base64imageData)
           image.setAttribute("src", window.localStorage.getItem('imagepath'))
           }

           function onFail(message) {
                   alert('Failed because: ' + message);
           }
      })     
})

LocalStorage и LocalFileSystem 

imageCLarray.forEach(image => {
    image.addEventListener('longtap', () => {
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
           destinationType: Camera.DestinationType.FILE_URI,
           saveToPhotoAlbum: true });

            function onPhotoDataSuccess(imageURI) {
                movePic(imageURI)
           }

            function onFail(message) {
                 alert('failed '+message)
            }

            function movePic(file) {
                 window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError)
            }

      // Callback function when the file system uri has been resolved
     function resolveOnSuccess(entry){ 
                            var d = new Date();
                            var n = d.getTime();
                            //new file name
                            var newFileName = n + ".jpg";
                            var myFolderApp = 'MyAppFolder';
                            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {      
                            //The folder is created if doesn't exist
                            fileSys.root.getDirectory( myFolderApp,
                                            {create:true, exclusive: false},
                                            function(directory) {
                                                entry.moveTo(directory, newFileName,  successMove, resOnError);
                                            },
                                            resOnError);
                                            }

                            , resOnError);
                        }

                        function successMove(entry) {
                            localStorage.setItem('imagepath', entry.toURL())
                            image.src = localStorage.getItem('imagepath')
                            console.log(image.src)
                        }

                        function resOnError (er) {
                            alert('error is '+er.code)
                        }                 

   })
  })
...