Problems saving src image in localStorage

Question

Problems saving src image in localStorage

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

This is my html page:

<!DOCTYPE html>
<html lang="es">
<head>

<link rel="stylesheet" href="css/miestilos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 </head>
 <body>
 <div>
    <input type="file" id="files"  />
    <output id="list"></output>
 </div>

<script type="text/javascript" src= "js/app.js"></script>

 </body>
</html>

And my script:

$(document).ready(function() {
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      document.getElementById('list').innerHTML='';
      span.innerHTML = ['<img class="center" id="imagen" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);


      localStorage.setItem("imgSrc",document.getElementById('imagen').src);

    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}
}
 document.getElementById('files').addEventListener('change', handleFileSelect, false);
});

I need to save the src of the image so that when I go to a different page.html I can paint this image on canvas and manipulate it.

For certain images it works but for big images I miss this error when doing the instruction "localStorage.setItem (" imgSrc ", document.getElementById ('image'). src);":

Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'imgSrc' exceeded the quota.

I understand that the src is too long to be stored in localStorage.

What I do on the other page is the following: var imgSrc = localStorage.getItem ("imgSrc");

var img = new Image ();

img.src = imgSrc;

It works for images but for others it gives me failure to save the src in the storage.

If someone knows how to solve it, I would appreciate it. Greetings.

javascript jquery html

asked by Andrés 22.10.2018 в 16:45

source

2 answers

Collect the months in HTML and PHP from a select Xpath with java, extract name

score 1 · Answer 1

The problem is that the localStorage is limited to 5Mb, and surely the content of the image in base64 occupies more than this or you have other elements in the localStorage that, together with the image, occupy more than the limit.

Maybe you can reduce the dimensions of the image with a library (so that it occupies less) before saving it in the localStorage. Here is an example of how to do it: link .

Another possibility would be to send it in a post to the other page and rewrite the src of the image in the HTML of the destination page, but it will generate a lot of unnecessary traffic.

I hope it serves you.

Greetings.

score 0 · Answer 2

An alternative is amplifyJS. Maybe something more game, because it allows you to switch between different technologies (localStorage, sessionStorage, globalStorage, userData, memory).

It will change slightly the syntax with which you save now in localStorage ...

For example:

To save

amplify.store("id_img", "http://");

To delete

amplify.store("id_img", null);

To list them

amplify.store();

More examples and official documentation: link