I'm trying to make an drawing application for FirefoxOS. Recently, i tried using indexedDB for local storage. However, since the app has to save a lot of coordinates in order to load them when starting the app the other day, indexedDB is giving me an error ABORTERROR (though only a part of drawn picture is displayed on restarting the app). I tried this in Firefox 21.0.
I would like to know how the procedure goes for saving and loading such things. I'm using Android S3 which has a similar App called S Memo which does similar stuff. The app has to be written in HTML and JavaScript because I want to use it with FirefoxOS.
You may like to save bunch of coordinates into single json or blob when lose visibility, therefore the loading will be faster and then the indexedDB is not blocked by frequent read/write operations.
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?
I am working on a content management project where from a tool we generate html/js/css
and image files. The data we store in JSON format.
Now, I want to play the contents using browser without any server, i checked some threads
and it suggests that it may be possible using file:// protocol, I want to check if there
is any limitation if I am not using any server. Or it is not possible to omit http server..
The other thing is that, I can't use concept of local storage because my data size is huge and in HTML5 the max size supported is 10 MB my requirement is approx 25 MB.
Please suggest.
Thanks.
Seems like an odd thing to do for a CMS, no? You can use the readfile API but you're limiting yourself to IE10+: http://caniuse.com/filereader
Edit, maybe should've been a comment but... If the data is only on clients computer, who can read the content of the CMS? Or are you creating 10MB+ files on every users computer?
Is it possible to blur a remote image using http://www.blurjs.com?
I have our images hosted on a remote CDN and we want to use blurjs to blur the image for a background effect. When we try and use blur js directly with the remote image javascript cannot read the file and throws a unable to read image data error.
The way i'm currently doing it is regenerating the image in php and then using blurjs, but it is very slow and consumes a lot of resources.
We've tried the css solution too with filters but the browers runs too slow when we do.
does anybody have a solution?
Your problem is that pixel access in canvas is not allowed for images loaded from a different domain than the one the page is hosted on. What you need is a proxy script that runs on your server which that allows your javascript to load images from other domains via your server. Of course the downside is that all traffic will also run through your server and that the time to retrieve the image will increase (since the image has first to be loaded to your server and then to the client) and there is unfortunately no way around that.
The good news is that this is a problem that Flash developers had to face many years ago already so it has been solved many times:
Here's for example a php script: http://www.abdulqabiz.com/blog/archives/2007/05/31/php-proxy-script-for-cross-domain-requests/
Here's a more recent implementation in Node.js http://codelikebozo.com/creating-an-image-proxy-server-in-nodejs
Which is the best way to store a pdf around ~4mb in sqlite with javascript?
I have tried using base 64 encoding but the Andoid browser freezes and quits when trying to open large files. Small files won't open either they just start to download but the download never completes and the filetype seems to be unknown. It has to work in the Android browser, and I have several files that I need to save so I have to use sqlite (because of size limits in offline storage)
Thanks in advance!
/Christian
You might want to consider PhoneGap for creating a Native application, thereby bypassing quotas. That way you can continue to use HTML5 to create the app.
This blog entry suggests a way to lift quota limits for PhoneGap apps:
http://blog.mattray.info/2011/08/into-blender-javascript-sqlite-ios-and.html
You could read the PDF in chunks (asking the server to send over bytes xx to yy), to minimize the impact on the mobile system, and store that in an sqlite table with a tracking number (chunk x of y) until you have everything. Then you could rebuild at any time the whole file as a big blob, and save that blob to a temp file -- see the link above for filesystem from html5rocks.
I have a web app (sencha/phonegap) that includes a feature allowing users to click on buttons that link to Wikipedia articles. This obviously works fine if the device has internet access, but I get numerous requests to make the app work when the app is offline too. To accomplish this, I'd like to give the user the option to download the linked articles/webpages for offline access. When the device does not have internet access, the app would instead display the saved version (which might be stale/out-of-date, but is better than nothing). What are possible ways to accomplish this task?
My first thought was to somehow use the html manifest to cache the pages in the phone's browser, which sounds possible on the Android browser, but iOS apparently has a 5MB browser cache limit - too small.
My next thought was to save the needed html & associated files and bundle them up inside the app. But this seems a rather cumbersome approach, the app becomes much larger than it needs to be, and the webpages are stale back to the date the app was installed.
Using javascript, is it possible to download webpages, which I could then save (on the sd card, for example) for access later?
Or is there a more elegant approach?
If anyone could point me in the right direction it would be much appreciated.
In pure Javascript you can make an Ajax request to download a page. Then you can use the FileWriter to write the responseText to a file on the file system. However, that won't help you when it comes to images. You'll need to use the FileTransfer.download() command to get the binary image files.
If I were you I'd:
Use AJAX to download the html.
Parse the html looking for images.
Use FileTransfer.download to get the images.