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: 

 

 

espbook

 

Comments




or email your comment to: comments@i-programmer.info

 

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

A Customisable Weather Forecast

Having an accurate weather forecast is critical for many situations, in particular for deciding weather conditions are suitable for to deploy infrastructure inspection drones. This [ ... ]


+ Full Project
AWS Low Cost Mailing List Using phpList And SES

Running a mailing list is not easy or cheap, but if you use AWS it can be. Find out how to create a low-cost and highly effective mailing list server.


+ Full Project
Other Projects

  


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