3

I am looking for a way to encoding a bmp image as a tiff or some other standard, compressed but lossless format in a browser (javascript). I guess if worst comes to worst I can write a library myself (getting the data from a canvas element) but I was hoping either: there's a better way to do it or someone else has already written something similar (I can't find a library).

I have users wanting to upload ~ 4mb (8-bit monochrome) bmp files, which I can losslessly compress to ~700kb tiff files with LZW (or even better ~300kb lossless JPEG-2000). I'd like to do this before the files are uploaded to save transfer costs/time.

Before you ask, I'm not being anal about the lossless encoding instead of just using high bitrate JPEG. These are astronomy photos that are used for analysis so they can't handle any compression artifacts being introduced.

Thanks, Jonny

jjh
  • 1,410
  • 2
  • 13
  • 13
  • 2
    you dont get a lossless image, when you compress it........ – Starx Dec 19 '10 at 06:02
  • @Starx - depends on the type of compression. for instance, as a simple example you can zip a bmp and then unzip and recover the original exactly. – jjh Dec 19 '10 at 06:16
  • 1
    I guess you have seen [jsZip](http://jszip.stuartk.co.uk/)? – Lee Dec 19 '10 at 06:25
  • 1
    I think it's a great idea, but you can't access files on their computer via JavaScript in a browser before it's uploaded. You could do it with Java or Flash or something like that, but not with JavaScript. If you even try to read the text out of a file upload input, it doesn't work with JavaScript. – dontangg Dec 19 '10 at 06:26
  • You can access files in JS on modern browsers (FileReader). See the answer below. I think I can do what I want (almost) using PNG compression obtained using a canvas element which will be efficient on Chrome. – jjh Dec 19 '10 at 14:59

2 Answers2

2

Use PNG. It's lossless and uses zlib compression. There are even programs like pngcrush that will optimize the image for size (only problem is it takes a while for this).

Is there any reason you're using JavaScript of all things for this process? Wouldn't it be easier in the long run if you did it in a Java applet (using a library that interfaces with the java.awt.Image class), or uploaded it to a server that did the image processing and returned the compressed image?

Edit: Please don't use a Java applet; the technology isn't well-supported anymore.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
  • Java applets seems increasingly less common. The PNG suggestion seems helpful, although not optimised for high colour-space pictures it actually seems to work well. – jjh Dec 19 '10 at 06:20
  • 1
    Also I'm wanting to avoid having to upload to server because it will take too long. – jjh Dec 19 '10 at 06:20
  • 1
    Also, java applets are not as cross-browser. They only work on some desktop browsers, whereas javascript works everywhere. And, with modern JIST compilation, javascript might as well be just as fast (if not faster) than java. –  May 13 '17 at 19:15
1

If you are willing to experiment something new, you could try a new lossless compression algorithm I created; through a Java applet it is possible to visualize the compressed images in a browser. You could use Javascript to trigger the loading of the applet, or manipulate directly the Java code (the program is open source). For many images, the compression ratio will be better than lossless Jpeg 2000. The address of the website is http://www.researchandtechnology.net/bcif/ .

If instead you want to use some well-known standard, then I'd agree with amphetamachine: using PNG would be the best choice.

So long, Stefano

Stefano
  • 11
  • 1