Common File Formats. Need a standard to store images Raster data Photos Synthetic renderings. Vector Graphic Illustrations Fonts

Transcription

1 1 Image Files

2 Common File Formats Need a standard to store images Raster data Photos Synthetic renderings Vector Graphic Illustrations Fonts Bitmap Format - Center for Graphics and Geometric Computing, Technion 2

3 Common File Formats Raster Graphics Good for texture Vector Graphics Bad for texture Bitmap Format - Center for Graphics and Geometric Computing, Technion 3

4 Common File Formats Raster Graphics Bad for resizing Vector Graphics Good for resizing Bitmap Format - Center for Graphics and Geometric Computing, Technion 4

5 Common File Formats Desirable Features High quality Lossy vs Lossless formats Channel depth bit per pixel number of possible colors Small file size Quality of compression Small overhead Application data Save application specific data Bitmap Format - Center for Graphics and Geometric Computing, Technion 5

6 One of the common image formats available And the simplest! Used in Windows Very easy to implement inefficient storage A matrix of pixels What is a bitmap? Bitmap Format - Center for Graphics and Geometric Computing, Technion 6

7 BMP Format Like most common image formats, a bitmap image consists of Header which contains descriptive information about the image, such as width, height, etc. Body which contains the actual (raster scanned) colors of the image pixels. Bitmap Format - Center for Graphics and Geometric Computing, Technion 7

8 BMP Structure BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 8

9 typedef struct { WORD bftype; //Magic number BM DWORD WORD WORD DWORD BITMAPFILEHEADER } BITMAPFILEHEADER; bfsize; //Size of file in bytes bfreserved1; bfreserved2; bfoffbits; BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 9

10 BITMAPFILEHEADER Cont. The BITMAPFILEHEADER fields are: bftype - Specifies the file type. It must be BM. bfsize - Specifies the size, in bytes, of the bitmap file. bfoffbits - Specifies the offset, in bytes, from the BITMAPFILEHEADER structure to the bitmap data. A BITMAPINFO structure immediately follows the BITMAPFILEHEADER structure in the DIB file BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 10

11 BITMAPINFO typedef struct BITMAPINFO { BITMAPINFOHEADER RGBQUAD } BITMAPINFO; bmiheader; bmicolors[1]; The BITMAPINFO structure combines the BITMAPINFOHEADER structure and a color palette. BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 11

12 BITMAPINFO typedef struct BITMAPINFOHEADER { DWORD bisize; LONG biwidth; LONG biheight; WORD biplanes; WORD bibitcount; DWORD bicompression; DWORD bisizeimage; LONG bixpelspermeter; LONG biypelspermeter; DWORD biclrused; DWORD biclrimportant; } BITMAPINFOHEADER; BITMAPFILEHEADER BITMAPINFO BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 12 Pixels

13 BITMAPINFOHEADER bisize size of the struct in bytes biwidth width in pixels biheight height in pixels biplanes layers in bitmap must be 1 bibitcount bit per pixel 1,2,4,8,16,24,32 Use 24 bits for 3 channels with no palette images. More fields look at Visual.Net manual for the rest of the fields. The above are the most important. Bitmap Format - Center for Graphics and Geometric Computing, Technion 13

14 GIF File Format Created in 89 by CompuServe for the internet Limited to 256 color palette Uses LZW compression Lossless Works better on uniform color areas Features transparent colors and animation 4-pass Interlacing Bitmap Format - Center for Graphics and Geometric Computing, Technion 14

15 PNG File Format Features PNG was developed to replace the GIF file format. Gif has a patent problem LZW is patented by Unisys. Alpha channel support - transparency Gamma correction hardware independence. Color space Up to 16 bit grayscale images Up to 48 bit true color PNG is a lossless image format Compression is done using the free gzip library. No degradation during image manipulation and resaving Interlacing Improve transmission times 2D interlacing effect like jpeg Bitmap Format - Center for Graphics and Geometric Computing, Technion 15

16 8-byte Signature The same for every png file Sequence of Chunks 4-byte header The name of the chunk IDAT for pixel data chunks PNG File Format Contain information like pixel data, gamma correction data, text data Ends with 32bit CRC Pixel ordering in IDAT Pixels in a scan-line come from left to right Scan-lines are ordered from top to bottom Bitmap Format - Center for Graphics and Geometric Computing, Technion 16

17 PNG File Format other chunks IHDR chunk Must appear first Contain the following fields Width: 4 bytes Height: 4 bytes Bit depth: 1 byte Color type: 1 byte Compression method: 1 byte Filter method: 1 byte Interlace method: 1 byte IEND chunk The IEND chunk must appear LAST. It marks the end of the PNG data stream. Contains empty data field. Bitmap Format - Center for Graphics and Geometric Computing, Technion 17

18 You are provided with a C++ class for the png library With it you can load, save and manipulate png images. The tool consists of: PngWrapper.h PngWrapper.cpp The PNG Tool It is already in the home work skeleton Bitmap Format - Center for Graphics and Geometric Computing, Technion 18

19 Example Reading a PNG file #include "PngWrapper.h" PngWrapper pngreadfile("test.png"); pngreadfile.readpng(); int c = pngreadfile.getvalue(84,118); //gray image if(pngreadfile.getnumchannels()==1) std::cout<<"gray color "<<c<<std::endl; //we only support rgb not bgr format else if(pngreadfile.getnumchannels() == 3){ int r = R(c);//the red componnent int g = G(c);//the green int b = B(c);//the blue std::cout<<"("<<r<<","<<g<<","<<b<<")"<<std::endl; } Bitmap Format - Center for Graphics and Geometric Computing, Technion 19

20 Example Writing a PNG file #include "PngWrapper.h" PngWrapper pngwrite( test.png,640,480); pngwrite.initwritepng(); int cx = pngwrite.getwidth()/2; int cy = pngwrite.getheight()/2; for(int I = 0; i < pngwrite.getwidth(); i++) for(int j = 0; j < pngwrite.getheight(); j++) if((i-cx)*(i-cx) + (j-cy)*(j-cy)<800 && (i-cx)*(i-cx) + (j-cy)*(j-cy)>600 (i-cx)*(i-cx) + (j-cy)*(j-cy)>200 && (i-cx)*(i-cx) + (j-cy)*(j-cy)<300) pngwrite.setvalue(i,j,set_rgb(255,0,0)); else pngwrite.setvalue(i,j,set_rgb(0,255,255)); //the result is only written to the disk now. pngwrite.writepng(); Bitmap Format - Center for Graphics and Geometric Computing, Technion 20

21 PPM format The lowest common denominator A "magic number" for identifying the file type. A ppm image's magic number is the two characters "P6". White-space (blanks, TABs, CRs, LFs). A width, formatted as ASCII characters in decimal. White-space. A height, again in ASCII decimal. White-space. P6 # feep.ppm Binary data Bitmap Format - Center for Graphics and Geometric Computing, Technion 21

22 The maximum color value (Maxval), again in ASCII decimal. Must be less than PPM format Newline or other single white-space character. A raster of Height rows, in order from top to bottom. Each row consists of Width pixels, in order from left to right. Each pixel is a triplet of red, green, and blue samples, in that order. Bitmap Format - Center for Graphics and Geometric Computing, Technion 22

23 Stands for Joint Photographic Experts Group Lossy compression JPEG Block discreet cosine transform lossy Each block is aprxmated by sum of cosines Only few bytes to encode 8x8 block Huffman coding - lossless Common bytes replaced by shorter codes Bitmap Format - Center for Graphics and Geometric Computing, Technion 23

24 DCT in JPEG Related to the Fourier transform divide the image into blocks of 8X8 pixels and apply transform Each block is a linear combination of cosines Low frequencies contain most of the information High frequencies can be thrown away Lossy! Transition between blocks Artifacts Fixed in JPEG 2000 using wavelet transform Bitmap Format - Center for Graphics and Geometric Computing, Technion 24

25 JPEG File Format Start of Image Frame End of Image Header Scan Scan Header Scan Scan Bitmap Format - Center for Graphics and Geometric Computing, Technion 25

26 JPEG Characteristics Good for storing photographs Good statistical behavior helps jpeg Able to represent images with lots of shades Good Compression Ratio Often 1:10 to 1:20 without any noticeable difference Good for transferring data on the web Quality Vs. Compression tradeoff 1.5Kb 4.7Kb 9.5Kb 15Kb 83Kb Bitmap Format - Center for Graphics and Geometric Computing, Technion 26

27 Bad for JPEG Characteristics Text a lot of compression artifacts due to the large number of sharp features Also bad for CAD blueprints Useless for medical images, why? Bitmap Format - Center for Graphics and Geometric Computing, Technion 27