3

I'm making a HTML/Javascript tool that does something with images. Frankly, I just use HTML because Java or C++ GUI is way too complicated and not worth the effort.

The tool just displays an image and then displays percentual and absolute coordinates as you hover the image:

image description

My aim is to create a little GUI for "Last images" allowing to quickly display recent image. And because the application is client-only, I can't use any kind of server storage. There's a localStorage object, but to me, it seems like a bad idea to store several MB of images in it.

What do you think? Should I use localStorage for that? Or is there an alternative? Or maybe the server cooperation is totally necessary?

Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
  • 1
    You can use local storage and save the image as a Base64 file. But if the file is too big, local storage is not recommended. And you might need to use some back-end programmings. JS is not good at file manipulation. – joydesigner Feb 03 '15 at 02:13
  • Yeah I know how to do it. But I'm not so sure that it's all-right to do it. – Tomáš Zato Feb 03 '15 at 02:14
  • 1
    have you looked at File API? http://www.w3.org/TR/FileAPI/ http://html5demos.com/file-api – Stuart Feb 03 '15 at 02:25
  • @Stuart Have you? As a matter of fact, I've read this document many times since I often meddle with files in javascript. This API doesn't provide any functions that allow you to save data actually (maybe except of possible invoking of saveAs dialog window) – Tomáš Zato Feb 03 '15 at 02:31
  • Is requirement to save file , image to client ? If possible , can post `html` , `js` ? – guest271314 Feb 03 '15 at 02:33
  • @guest271314 Try this: https://github.com/eligrey/FileSaver.js/ – Tomáš Zato Feb 03 '15 at 02:35
  • @TomášZato See https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL , http://stackoverflow.com/questions/28120177/save-json-file-locally/28122377#28122377 , http://stackoverflow.com/questions/28207106/pdf-file-upload-ajax-html/28257733?s=6|0.9429#28257733 , http://stackoverflow.com/questions/24227331/how-to-create-a-base64-file-from-nothing/24231030?s=14|0.6862#24231030 , http://stackoverflow.com/questions/24826495/download-file-served-as-response/24829153#24829153 – guest271314 Feb 03 '15 at 02:39

2 Answers2

4

You can use a compression algorithm to compress the base64 string representation of images. I used the similar approach in my code and it alowed me to store more images compared to normal case.

Compression lib: LZstring http://pieroxy.net/blog/pages/lz-string/index.html

Vijay
  • 2,965
  • 1
  • 15
  • 24
  • I wonder what's the purpose of base64 when another library then generates compressed data. Cannot the base64 just be ommited in that case? – Tomáš Zato Feb 03 '15 at 03:02
  • LZstring compresses string data only. Also, base64 will be lighter then actual image blob. – Vijay Feb 03 '15 at 03:07
3

It's either that or using the HTML5 File API, but if you are just saving a few images under 5mb HTML5 WebStorage should be enough, like this:

If you use the web storage, and HTML5 Canvas to convert the image into text (data uri):

var img = new Image();
   img.src = "same_origin.png";

localStorage.setItem("lastImage",imgToURI(img));


function imgToURI(img){
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img,0,0);
    return canvas.toDataURL();
}

And then for retrieving the saved image:

var last = new Image();
  last.src = localStorage.getItem("lastImage1");

Note: Most browsers only allow 5mb of local storage.

Note: While localStorage is highly supported, canvas it's not supported in IE8.

Note: The HTML File API approach wouldn't be user friendly, as of now Chrome is the only one allowing writing files with their filesystem api, for the other ones you'll have to convert the images to data uri, then make a link with all the data in the form of a data uri text file, and have the user download it and reload it every time.

Hope it helps!

undefined
  • 3,949
  • 4
  • 26
  • 38
  • See http://stackoverflow.com/questions/22097747/getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data – guest271314 Feb 03 '15 at 02:50