I am looking for a way to encoding a bmp image as a tiff or some other standard, pressed but lossless format in a browser (javascript). I guess if worst es 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 press 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 pression artifacts being introduced.

Thanks, Jonny

I am looking for a way to encoding a bmp image as a tiff or some other standard, pressed but lossless format in a browser (javascript). I guess if worst es 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 press 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 pression artifacts being introduced.

Thanks, Jonny

• javascript
• image-processing
• jpeg
• tiff

• 2 you dont get a lossless image, when you press it........ – Starx Commented Dec 19, 2010 at 6:02
• @Starx - depends on the type of pression. for instance, as a simple example you can zip a bmp and then unzip and recover the original exactly. – jjh Commented Dec 19, 2010 at 6:16
• 1 I guess you have seen jsZip? – Lee Commented Dec 19, 2010 at 6:25
• 1 I think it's a great idea, but you can't access files on their puter 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 Commented Dec 19, 2010 at 6: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 pression obtained using a canvas element which will be efficient on Chrome. – jjh Commented Dec 19, 2010 at 14:59

2 Answers 2

Use PNG. It's lossless and uses zlib pression. 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 pressed image?

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

If you are willing to experiment something new, you could try a new lossless pression algorithm I created; through a Java applet it is possible to visualize the pressed 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 pression ratio will be better than lossless Jpeg 2000. The address of the website is http://www.researchandtechnology/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