Generating bitmap images via javascript

Hi,
Since JavaScript does not know, has no way to create files, it is a matter of thinking that how we can save a map image. This will helps me to continue the data: URI scheme. This allows to embed a graphic in the HTML file. I have never practice this but if this really works then how we can generate a bitmap file by using Javascript. The conclusion I got that this works prorper in Mozilla only. In case of Opera, the file size is limited to 4096Byte, and in Internet Explorer the URI scheme is missing completely.

A simple image class for pixel graphics can be used here. In the basic class you can include everything necessary for a graphic: Information about the width, height, and the pixel data in a two-dimensional array. A example for the same lies below.

PHP Code:

---

    function image pixels (width, height) ( 
      
     this.getWidth = function () ( 
             this.mWidth return; 
         ) 
      
     this.getHeight = function () ( 
             this.mHeight return; 
         ) 
      
     this.getRow = function (y) ( 
             return this.mImageRows [y]; 
         ) 
      
     / / Our constructor creates the image and fills it with zero 
     this.mWidth = width; 
     this.mHeight = height; 
     this.mImageRows = []; 
     for (var y = 0, y <height; y + +) ( 
         var row = []; 
         for (var x = 0, x <width; x + +) ( 
             row.push (0); 
         ) 
         this.mImageRows.push (row); 
     ) 


---

Now we can build us a small picture with a gradient from green to red: P
var image = new Image pixels (64, 256);

PHP Code:

---

) 
for (var y = 0, y <image.getHeight (), y + +) ( 
     var row = image.getRow (y); 
     for (var x = 0, x <image.getWidth (), x + +) ( 
         row [x] = (y <<16) | ((255 - y) <<8); 
     ) 
) 


---

As you can see, we store all the pixels in RGB format, 8bit per color channel.

When writing the bitmap file, it will happen, that not only bitwise but also by a shor DWORD value you can create a image. Therefore, you can extend the Array class to corresponding functions, which takes a multi-byte value, and storing them as single bytes into components. Bitmaps are stored little bits.

PHP Code:

---

Binary array function () ( 
     var array = []; 
     array.pushInt = function (i) ( 
             this.push (i & 0xff); 
             this.push ((i>> 8) & 0xff); 
             this.push ((i>> 16) & 0xff); 
             this.push ((i>> 24) & 0xff); 
         ) 
          
     array.pushShort = function (i) ( 
             this.push (i & 0xff); 
             this.push ((i>> 8) & 0xff); 
         ) 
      
     array.pushChar = function (c) ( 
             this.push (c.charCodeAt (0) & 0xff); 
         ) 
      
     array.toString_Base64 = function () ( 
             / / I will not describe in detail here 
             / / Is found in the sample. 
              
             return it; 
         ) 
          
     return array; 
) 


---

In order to write a bitmap file, you will need to first look at LinkedIn the format of a bitmap file. A bitmap consists of two headers, and behind the uncompressed data. The first header, and bitmap-file header includes four properties mentioned. The first (a WORD, that is, 2 bytes) is always the string "BM". In response, the file size (DWORD follows, therefore, 4 bytes), a reserved DWORD, and the position at which to start the data (54bytes) (DWORD). It must however be giving in calculating the values of some eight: The byte length of the rows of a bitmap must always multiple of 4. So we write a bitmap class and a function that writes our header (writeBitmapFileHeader):

PHP Code:

---

function Bitmap (image) ( 
     
     this.writeBitmapFileHeader = function (bitmap, filesize) ( 
             bitmap.pushChar ( "B"); 
             bitmap.pushChar ( "M"); 
             bitmap.pushInt (filesize); 
             bitmap.pushInt (0); 
             bitmap.pushInt (54); 
         ) 
     
     this.mImage = image; 
) 


---