Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 07-11-2009
Member
 
Join Date: Feb 2009
Posts: 50
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.
Reply With Quote
  #2  
Old 07-11-2009
Member
 
Join Date: May 2008
Posts: 2,293
Re: Generating bitmap images via javascript

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 (widthheight) ( 
      
     
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 
0<height+ +) ( 
         var 
row = []; 
         for (var 
0<width+ +) ( 
             
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 
0<image.getHeight (), + +) ( 
     var 
row image.getRow (y); 
     for (var 
0<image.getWidth (), + +) ( 
         
row [x] = (<<16) | ((255 y) <<8); 
     ) 

As you can see, we store all the pixels in RGB format, 8bit per color channel.
Reply With Quote
  #3  
Old 07-11-2009
Member
 
Join Date: Oct 2005
Posts: 2,389
Re: Generating bitmap images via javascript

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 (0xff); 
             
this.push ((i>> 8) & 0xff); 
             
this.push ((i>> 16) & 0xff); 
             
this.push ((i>> 24) & 0xff); 
         ) 
          
     array.
pushShort = function (i) ( 
             
this.push (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; 

Reply With Quote
  #4  
Old 07-11-2009
Member
 
Join Date: May 2008
Posts: 2,383
Re: Generating bitmap images via javascript

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 (bitmapfilesize) ( 
             
bitmap.pushChar "B"); 
             
bitmap.pushChar "M"); 
             
bitmap.pushInt (filesize); 
             
bitmap.pushInt (0); 
             
bitmap.pushInt (54); 
         ) 
     
     
this.mImage image

Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Generating bitmap images via javascript"
Thread Thread Starter Forum Replies Last Post
Softwares for generating Special effects in Videos or images ProBaal Windows Software 4 15-02-2012 04:54 PM
What are Bitmap files? L 4 Life Windows Software 5 18-01-2011 08:04 AM
How to create Animated Images using JavaScript? Rob Dizzle Software Development 6 24-03-2010 09:49 PM
JavaScript to count number of images Juan-Carlos Software Development 5 11-12-2009 05:22 AM
Create a Bitmap with two Pieces GunFighter Customize Desktop 4 22-04-2009 03:00 PM


All times are GMT +5.5. The time now is 07:13 PM.