Convert image URL in javascript

Question

Any other way to convert image URL to base64 or blob? I want to store 900 images in sqlite database in cordova App for use it in offline mode. All images are in HD so I can't convert using canvas. Then I tried XMLHttpRequest but it takes a lots of time to convert in base64. So can anyone give you other solution to store image in database. Thanks in advance.

Try this plugin github.com/chrisben/imgcache.js... download the images in device and you can get them by url... — Danyel Cabello
– Danyel Cabello, Commented Oct 9, 2015 at 5:48
Please mention your exact situation, caching 900 HD images(~900MB?) in mobile doesn't sound like a good thing, you probably have to rethink about this requirement, especially when offline databases doesn't offer too much MBs. Even if you want to cache I would recommend using Application Cache instead of webSQL. — sabithpocker
– sabithpocker, Commented Oct 9, 2015 at 5:55
@sabithpocker I want to store in around 900 images in sqlite database. every images are around 1MB. Whenever user is in offline mode user can see all images from database this is my requirement. But when I convert image in base64 it takes a lot of time. So I need other solution rather convert in base64 like in native app they convert image in bytes. — Krishna
– Krishna, Commented Oct 9, 2015 at 6:01
I was asking you why you are doing this? What are you developing? Can there be a different approach than caching 900 HD images? Also try if you can convert it from server and send the base64 as string to browser, create an api around this concept so that processing is moved to server. api/base64/20/30 would return a JSON with base64 of 20th to 30th image.PS: This indeed looks like a XY Problem — sabithpocker
– sabithpocker, Commented Oct 9, 2015 at 6:09
sorry for misunderstanding. It's one project to display book pdf in Mobile App. So first backend developer convert pdf into images and then send it in api.Now I convert this images in base64 for offline use. I didn't know it's a good way or not. But It's requirement to show all images of pdf in offline. — Krishna
– Krishna, Commented Oct 9, 2015 at 6:20

sabithpocker · Accepted Answer · 2015-10-09 06:25:58Z

1

Whatever you are doing try to avoid this much HD images.

Just enumerating the concepts mentioned in comments:

Cache images with Application Cache and save the URIs in database.
Convert all images to base64 manually and store them in JSON in server, client can now just access these static JSON from server. Think of splitting them to chunks of 2-3 images/ JSON.
Create an API that would reply with base64 of requested images. The API would fetch the image just in time, calculate the base64 and reply with JSON containing the base64 as string.

answered Oct 9, 2015 at 6:25

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jungerislaender Over a year ago

I'd highly recommend #1 and use image compression beforehand.

Collectives™ on Stack Overflow

Convert image URL in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related