Asked  7 Months ago    Answers:  5   Viewed   76 times

So, basically, I need to upload a single image, save it to localStorage, then display it on the next page.

Currently, I have my HTML file upload:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

Which uses this function to display the image on the page

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

The image is displayed instantly on the page for the user to see. They are then asked to fill out the rest of the form. This part is working perfectly.

Once the form is complete, they then press a 'Save' button. Once this button is pressed, I save all form inputs as localStorage strings. I need a way to also save the image as a localStorage item.

The save button will also direct them to a new page. This new page will display the users data in a table, with the image being at the top.

So plain and simple, I need to save the image in localStorage once the 'Save' button is pressed, and then loan the image on the next page from localStorage.

I found some solutions such as this fiddle and this article at moz://a HACKS.

Although I am still extremely confused on how this works, and I only really need a simple solution. Basically, I just need to find the image via getElementByID once the 'Save' button is pressed, and then process and save the image.

 Answers

25

To whoever also needs this problem solved:

Firstly, I grab my image with getElementByID, and save the image as a Base64. Then I save the Base64 string as my localStorage value.

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

Here is the function that converts the image to a Base64 string:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image/(png|jpg);base64,/, "");
}

Then, on my next page I created an image with a blank src like so:

<img src="" id="tableBanner" />

And straight when the page loads, I use these next three lines to get the Base64 string from localStorage, and apply it to the image with the blank src I created:

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

Tested it in quite a few different browsers and versions, and it seems to work quite well.

Tuesday, June 1, 2021
 
mopsyd
answered 7 Months ago
61

Take a look at the upload class from the docs :

http://ellislab.com/codeigniter/user-guide/libraries/file_uploading.html

hint : you'll save the file to server and then save the URL in the database, then you can display the URL inside an IMG tag.

Saturday, May 29, 2021
 
dkcwd
answered 7 Months ago
77

Create DataBase helper class like this..

On Capturing the image insert the image by converting into bytes:

Imagehelper help=new Imagehelper(this);

    if (requestCode == CAMERA_REQUEST) {  
                        Bitmap photo = (Bitmap) data.getExtras().get("data");   
                        imageView.setImageBitmap(photo);
                        ByteArrayOutputStream stream = new ByteArrayOutputStream();
                        photo.compress(Bitmap.CompressFormat.PNG, 100, stream);
                        byte[] byteArray = stream.toByteArray();

                        help.insert(byteArray);
    }

To retrieve Form the Database:

Imagehelper help=new Imagehelper(this);

       Cursor c= help.getAll();
       int i=0;
       if(c.getCount()>0)
       {  
           Bitmap[]  array=new Bitmap[c.getCount()];
           c.moveToFirst();
           while(c.isAfterLast()==false)
           {

               byte[] bytes=c.getBlob(c.getColumnIndex("imageblob"));

            array[i]=BitmapFactory.decodeByteArray(bytes, 0, 0);
            c.moveToNext();
            i++;
            }
           Log.e("Bitmap length",""+array.length);
       }

Pass this Bitmap array to ListView

Thursday, June 24, 2021
 
Deyson
answered 6 Months ago
39

This shouldn't be working at all. Its localStorage (JS is very case sensitive), and to save an item, you use setItem, change your syntax to:

//You would not define var _NSCaseId and save the var, you save a string key
localStorage.setItem('_NSCaseId', nsId); //set

And to get

localStorage.getItem('_NSCaseId');

See DOM Storage: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Saturday, July 31, 2021
 
daniel__
answered 5 Months ago
95

I prefer using localStorage:

Javascript:

var $content = $('.js-content');

if (localStorage.getItem('isVisible') === 'true') {
    $content.addClass('content_visible');
}

$('.js-button').on('click', function() {
    $content.toggleClass('content_visible');
    localStorage.setItem('isVisible', $content.hasClass('content_visible'));
});

CSS:

.content {
    display: none;
}

    .content_visible {
        display: block;
    }

HTML:

<button type="button" class="js-button">+</button>
<div class="content js-content">This is content</div>

JSFiddle

Sunday, November 21, 2021
 
MikeSmithDev
answered 3 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share