Add transition atfer uploading background image to localstorage

Question

I would like to know how can I add transition (fade effect) after uploading an image to localstorage?

$(switchBackground);
var oFReader = new FileReader(),
  rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function(oFREvent) {
  localStorage.setItem('b', oFREvent.target.result);
  switchBackground();
};

function switchBackground() {
  var backgroundImage = localStorage.getItem('b');
  if (backgroundImage) {
    $('body').css('background-image', 'url(' + backgroundImage + ')');
  }
}

function loadImageFile(testEl) {
  if (!testEl.files.length) {
    return;
  }
  var oFile = testEl.files[0];
  if (!rFilter.test(oFile.type)) {
    alert("You must select a valid image file!");
    return;
  }
  oFReader.readAsDataURL(oFile);
}

<input id="test" type="file" onchange="loadImageFile(this)" />

How are you storing image in local storage? You mean to say url? And local storage is synchronous, so image storing in local storage has nothing to do with fade effect. — kanhai shah, Feb 23 '19 at 01:35

score 0 · Answer 1 · answered Feb 23 '19 at 08:09

CSS background-image property of a DOM element does not have a built-in means to animate.

CSS pseudo element can be animated. You can use :after CSS pseudo element with width set to the calc(100vw) and height set to calc(100vh) to cover the viewport, and animation property set where corresponding keyframes animate the pseudo element content property value from opacity 0 to opacity 1. If backgroundImage is not null, append CSS text to <style> element which sets content property of body :after pseudo element with content set to CSS url() function to the data URL retrieved from localStorage.

<!DOCTYPE html>
<html>
<head>
  <style>
    body:after {
      position: relative; /* set `position` to `relative`
      content: unset; /* set `content` to `unset`  */
      width: calc(100vw); /*  width of viewport */
      height: calc(100vh); /* height of viewport */ 
      animation: bg 5s ease forwards; /* `iteration-timing-function` set to `forwards` */
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(switchBackground);

    var oFReader = new FileReader(),
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function(oFREvent) {
      localStorage.setItem('b', oFREvent.target.result);
      switchBackground();
    };

    function switchBackground() {
      var backgroundImage = localStorage.getItem('b');
      if (backgroundImage) {
        // set `body:after` `content` to `data URL`: `backgroundImage`
        $("style").append(`body:after{content:url(${backgroundImage})} @keyframes bg {from {opacity:0}to {opacity:1)}}`);
      }
    }

    function loadImageFile(testEl) {
      if (!testEl.files.length) {
        return;
      }
      var oFile = testEl.files[0];
      if (!rFilter.test(oFile.type)) {
        alert("You must select a valid image file!");
        return;
      }
      oFReader.readAsDataURL(oFile);
    }
  </script>
</head>
<body>
  <input id="test" type="file" onchange="loadImageFile(this)" />
</body>
</html>

plnkr http://plnkr.co/edit/b29hbGi6meodd2LTEgFL?p=preview

It's not working. Background has no transition and the remove button removes the image only after refreshing the page. `function removeImageFile() { localStorage.removeItem('b'); switchBackground(); }` — Mix911, Feb 23 '19 at 14:54
Background has transition but the remove button I added is working only after refresh. — Mix911, Feb 23 '19 at 15:00
@Mix911 _"but the remove button I added is working only after refresh"_ Neither the question nor the code mentions a "remove button". See https://stackoverflow.com/help/how-to-askThe CSS appended to the ` — guest271314, Feb 23 '19 at 16:41

Add transition atfer uploading background image to localstorage

1 Answers1