We are planning to create a image manipulation service in HTML5. One goal is that the service would work for anonymous users.
User adds a image (open file dialog / drag and drop)
User manipulates image in the browser
User saves the result
Now, the trick here is that the browser may die under us on any moment (user exists, laptop battery is empty, etc...) We'd like to have some kind of auto-save here which records the progress. This means keeping the track of images added on the page, preferably in offline manner.
The question is, can we somehow locally auto-save files and images user has added on the page, or are we forced to make user re-enter all images he/she has added on the page in the case page must be reloaded? Does localStorage has support for local file objects or references?
Yes, you can implement auto-save feature.
You might use HTML5 Canvas API to let users to manipulate image in the browser. Then you can use toDataURL method to get the data URL of the image. After get that, you can save it to localstorage. We can save just strings in localstorage for now. Spec says object can be saved in localstorage but most browsers don't support it.
The setInterval method can be used to save the image periodically.
Not possible:
http://dev.w3.org/2006/webapi/FileAPI/#lifeTime
Related
So we have this web image gallery we are working on. We are planning an architecture that is similar to this:
1 - Download all images from the server and store it in the local storage (HTML5)
2 - Display in gallery as if it were rendered from local drive
3 - Store any edits done in the gallery in local drive
4 - Upon clicking Completed button, upload all the change information into remote server
The images will have a higher count, like maybe in the thousands. I wanted to check if the above is do-able.
The team working on this project says that HTML5 local storage is of no use in context. They state that downloaded images are always going to reside in the cache and it will cause performance degradation in any case, and it cannot be helped.
Is that true? Is there anything that can be done using new HTML5 options to optimize this work flow?
Theoretically you could base64 encode the images and store the resulting string in local storage. The only reason to do something like this, though, is to persist the edited image in an "offline" mode whereby they can close and reopen their browser without losing any of the changes they made. Otherwise these edits could be stored in memory and, once a user was finished, could then be persisted back to the server.
As for the original images themselves, your team members are correct, once the file has been downloaded, the browser won't attempt to fetch it again unless the expiration date in the header has lapsed.
EDIT
Found a link to another stackoverflow post describing the process:
How to save an image to localStorage and display it on the next page?
As part of a weekend project, I'm making a little website that draws on a (google) map based on user running tracks. I would like users to be able to upload a snapshot of the map using a facebook share button. The catch is, I would like to avoid hosting the images myself, to reduce bandwidth usage.
I can use html2canvas to turn a map into a canvas, and that into a .png using toDataURL(). The png would then be contained in a javascript variable in the user's browser, and not stored (or hosted) anywhere. So, with that in mind:
Can anyone think of a way to make facebook scrap that image for the entry in the user's time line?
Would facebook store the image permanently, or would it try to refresh it periodically (and fail)?
I understand that following the link in the post would also not go to the image (which doesn't exist), but less assume that's not an issue for now.
Any ideas or alternatives would be very welcome! Thanks!
According to How long is Facebook caching the sharing thumbnails?, facebook is caching share images for 3-5 years, so if you can get it in there..
perhaps you DO save the image and then delete it with a cron task that runs every minute?
* * * * * /home/me/scripts/deleteAllMyShareThumbs.sh
I'm developing an application that will allow the user to create his/her own data, and since I don't have a backend or a database, everything just lives on the user's session.
My ideal solution would be the following:
User works with the application, clicks on "Save", gets a download prompt, downloads a file to his/her filesystem
User clicks on "Load", a file input dialog gets shown, user picks his/her file, and the data is back again on the app.
I thought in using the FileSystem API, but it will just work on a sandboxed environment which defeats the ability for the user to work with the data in another browser.
I know I can simulate a download by just stringifying the data dropping it into a window to make a download. However, when I want to load this data again using input type=file, I don't have the ability to read the actual contents of the file, so it's a one-way path.
Some other apps usually just displays the contents of the file to the user and make the user copy/paste content, but I would like to simplify to the user.
Finally, I would like to support at the very least the latest version of desktop browsers.
What option would be the most suitable for this situation?
You should offer files for download, then read them from <input type="file"> using FileReader.
I am building an offline web application, and I want to be able to change the html of the page before the user saves it. since I cannot seem to find a way to trigger the save as function from javascript (except from IE), I need to just do some prep work before letting the browser save the page. I am not trying to force the user to do anything, just trying to update the page so that it saves it's state to the actual html of the page being saved. I can do this with a button, but i have to then ask the user to press Ctrl+S which is not smooth at all.
So I either need to be able to trigger a browser save from JavaScript, or handle the save event myself before allowing the default callback to happen.
Can this be done in a cross-browser supported way? I have found several pages dealing with the issue, but none clear it up as I wished, so sorry if this sounds like a duplicate.
You could do it using Data URI's. This question is similar, a javascript-generated CSV file that would be prompted for the user to download.
There may be other solutions but I think they would be proprietary so not future-proof.
This has now become possible with blobs. FileSaver.js is a cross platform solution. This will allow saving of any binary resource.
I know that most of the media in web pages are temporarily stored to a temp folder or browser cache. Some are directly embedded in web pages so that we can see the source and can save them. But how to save images loaded using any other method?
You can see what I am talking about here. Is there any solution to save images from this site's gallery?
Yes there is a way to save the images by using the followings
1) Mozilla Firefox
2) Firebug
open the net console in it and select the tab named images
in that u can see all the images and save the images
for your reference, I attached a image.
then copy the location by right click and paste the location
and get the image.
~~~~~~ Happy Coding ~~~~~~~~~~~
Generally, js can't hold the image itself. but the Attribute src, a string instead. And js cannot handle the file on client, you can't modify, move, or copy files. So if you want to keep the images, you can send a http header like if-Modified-Since on server side with php or java, then the browser will not load the image again.
May this will help you. Good Luck!
You could try to use a offline browser.
They save whole webpages and deeping on software they catch more or less.
Offline Browsers