在 PWA 中离线时的图像存储

Question

我正在为我现有的托管网站构建手动 PWA（不使用框架 IONIC、React 等）。 我的基本要求是我想从我的手机摄像头捕捉图片。但条件是： 1.当我拍摄照片时，我将完全离线。 2.我想把它上传到数据库中的服务器方式。但由于我离线，我想将其存储在本地存储中，当我在 3 天后重新上线时，它会恢复剩余的内容并自动将图像上传到服务器。

我尝试使用 javascript，但没有得到那么多。 我想要的基本方法是：

if(camera clicked)->
   if(upload btn clicked)-> 
        if(device is online)-> 
           upload to the server;
           (**or I can call one function here which can upload the image to server.)
        else if(device is offline)->
           upload to localstorage;
//again when device gets online I will call one **function(which is I am calling from **) in constructor which get executed everytime when site is reloaded or app is opened. 

My ** function will be :
upload()->
    if(device is online)->
      try looking into localstorage -> if image address is available ->
        upload_image_to server where src="address_of_image_in_localstorage".

我想只使用 html 和 javascript 而不是任何框架来实现这一点。 我上面添加的代码只是猜测的方法，而不是任何类型的代码。 如果有，请提出任何改进的方法。如果任何人都可以帮助实现代码，而不仅仅是提供信息的答案，那就更好了。

方法现在只适用于android，但如果有其他平台可以理解，可以建议期刊方法。

Answer 1

我建议先convert the image to base 64 并将其保存到您的localstorage。有一个名为 online 的事件，它将检测用户何时再次上线，您可以在那里将您的图像上传到数据库：

window.addEventListener("online", function(){ alert("User is now online"); }); 

Answer 2

我建议您使用保存文件的本地文件夹，并将其引用 [ex, path] 保存在索引数据库中。

当您有互联网连接时，您可以同步图像。 这是您的 HTML 代码的外观：

 <div class="form-group col-md-12 col-sm-12 col-xs-12" >
     <label for="agreement_img">Upload billede:</label>
     <input type="file" class="form-control image1" id="image1" name="image1">
</div>

用于保存离线图像的 javascript 代码

if( document.getElementById("image1").files.length != 0 ){
            var files1 = $('#image1')[0].files[0];
            writeImage(files1.name, files1,1);    
  }

 var OfflineArray = {};
  var SIZE = 100 * 1024 * 1024; // 100 MB

  var errorFct = function (e) {
    console.error(e);
  };

  var getFileSystem = function (successFct) {
    navigator.webkitPersistentStorage.requestQuota(SIZE, function () {
      window.webkitRequestFileSystem(window.PERSISTENT, SIZE, successFct, errorFct);
    }, errorFct);
  }; 


  var createTempName = function () {
    return 'temp.name.dummy.jpg';
  };

  var addToSyncQueue = function (filename) {
    // adding to sync queue
    console.log('Adding to queue', filename);
  };

  var showImage = function (fileName,imgno) {
    var src = 'filesystem:' + window.location.origin + '/persistent/' + fileName;
    return src;

  };

  var readImage = function (fileName, successFct) {
    getFileSystem(function (fileSystem) {
        fileSystem.root.getFile(fileName, {}, function (fileEntry) {

          fileEntry.file(successFct, errorFct);

        }, errorFct);
      }
    );
  };

  var writeSuccessFull = function (fileName,imgno) {
    //addToSyncQueue(fileName);

    var imgfile = showImage(fileName,imgno);
    console.log(imgfile);
    var cnt = localStorage.getItem('cnt');
    localStorage.setItem("offlineimg"+ cnt +"_"+ imgno, imgfile);
  };

  function writeImage(fileName, file,imgno) {
    getFileSystem(function (fileSystem) {
      fileSystem.root.getFile(fileName, {create: true}, function (fileEntry) {

        fileEntry.createWriter(function (fileWriter) {
          fileWriter.onwriteend = writeSuccessFull(fileName,imgno);

          fileWriter.onerror = errorFct;

          fileWriter.write(file);

        }, errorFct);

      });
    });
  }