Reading A BMP File In JavaScript
Written by Ian Elliot   
Monday, 19 August 2013
Article Index
Reading A BMP File In JavaScript
Converting Bits To Bitmap
Converting From Bitmap To ImageData
Complete Program Listing
Page 4 of 4

The Complete Program


<!DOCTYPE html>
 <html>
  <head>
   <title>BMP To Canvas</title>
   <meta http-equiv="Content-Type"
     content="text/html;
           charset=UTF-8">
   <meta name="viewport"
     content="width=device-width">
  </head>
  <body>
  <input type="file" id="input">
  <canvas id="canvas1"
      width="128"
      height="128">
   This text is displayed if your browser
   does not support HTML5 Canvas.
  </canvas>
 <script>
 var inputElement =  document.getElementById("input");
 inputElement.addEventListener("change",
                          handleFiles, false);
 var canvas1 = document.
                getElementById('canvas1');
 var ctx1 = canvas1.getContext('2d');

 function handleFiles(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.addEventListener("load",
                        processimage, false);
  reader.readAsArrayBuffer(file);
 }

 function processimage(e) {
  var buffer = e.target.result;
  var bitmap = getBMP(buffer);
  var imageData = convertToImageData(bitmap);
  ctx1.putImageData(imageData, 0, 0);
 }

 function getBMP(buffer) {
  var datav = new DataView(buffer);
  var bitmap = {};
  bitmap.fileheader = {};
  bitmap.fileheader.bfType =
                datav.getUint16(0, true);
  bitmap.fileheader.bfSize =
                datav.getUint32(2, true);
  bitmap.fileheader.bfReserved1 =
                datav.getUint16(6, true);
  bitmap.fileheader.bfReserved2 =
                datav.getUint16(8, true);
  bitmap.fileheader.bfOffBits =
                datav.getUint32(10, true);

  bitmap.infoheader = {};
  bitmap.infoheader.biSize =
                datav.getUint32(14, true);
  bitmap.infoheader.biWidth =
                datav.getUint32(18, true);
  bitmap.infoheader.biHeight =
                datav.getUint32(22, true);
  bitmap.infoheader.biPlanes =
                datav.getUint16(26, true);
  bitmap.infoheader.biBitCount =
                datav.getUint16(28, true);
  bitmap.infoheader.biCompression =
                datav.getUint32(30, true);
  bitmap.infoheader.biSizeImage =
                datav.getUint32(34, true);
  bitmap.infoheader.biXPelsPerMeter =
                datav.getUint32(38, true);
  bitmap.infoheader.biYPelsPerMeter =
                datav.getUint32(42, true);
  bitmap.infoheader.biClrUsed =
                datav.getUint32(46, true);
  bitmap.infoheader.biClrImportant =
                datav.getUint32(50, true);
  var start = bitmap.fileheader.bfOffBits;
  bitmap.stride = Math.floor(
   (bitmap.infoheader.biBitCount *
    bitmap.infoheader.biWidth+31)/32)*4;
  bitmap.pixels =
           new Uint8Array(buffer, start);
  return bitmap;
 }


 function convertToImageData(bitmap) {
  canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var Width = bitmap.infoheader.biWidth;
  var Height = bitmap.infoheader.biHeight;
  var imageData =
        ctx.createImageData(Width, Height);
  var data = imageData.data;
  var bmpdata = bitmap.pixels;
  var stride = bitmap.stride;

  for (var y = 0; y < Height; ++y) {
   for (var x = 0; x < Width; ++x) {
    var index1 = (x+Width*(Height-y))*4;
    var index2 = x * 3 + stride * y;
    data[index1] = bmpdata[index2 + 2];
    data[index1 + 1] = bmpdata[index2 + 1];
    data[index1 + 2] = bmpdata[index2];
    data[index1 + 3] = 255;
   }
  }
 return imageData;
 }
 </script>
</body>
</html>

 

 

If you would like the source code of this project, register with I Programmer and visit the CodeBin. 

 

 This is part three of a three part series on typed arrays:

Related Articles: 

 

 

blog comments powered by Disqus

 

To be informed about new articles on I Programmer, subscribe to the RSS feed, follow us on Google+, Twitter, Linkedin or Facebook or sign up for our weekly newsletter.

 

Banner

Automatic Web Page Use With .NET

Using web browser macros, the need to get more control over what is happening during the automated use of a web page becomes increasingly obvious. After trying a number of possible solutions, C# and . [ ... ]


+ Full Project
Getting started with Google Maps JavaScript

Google Maps is the basis of all Google Mapping products and it's easy to use in your website or web app. We take a quick look at how to get started and what features you can take advantage of.


+ Full Project
Other Projects

  


<< Prev - Next
Last Updated ( Tuesday, 27 August 2013 )
  		 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2015 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.