Reading A BMP File In JavaScript
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

The Complete Program

<!DOCTYPE html>
   <title>BMP To Canvas</title>
   <meta http-equiv="Content-Type"
   <meta name="viewport"
  <input type="file" id="input">
  <canvas id="canvas1"
   This text is displayed if your browser
   does not support HTML5 Canvas.
 var inputElement =  document.getElementById("input");
                          handleFiles, false);

 var canvas1 = document.
 var ctx1 = canvas1.getContext('2d');

 function handleFiles(e) {
  var file =[0];
  var reader = new FileReader();
                        processimage, false);

 function processimage(e) {
  var buffer =;
  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.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 =;
  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;



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.



The Knapsack Problem

I like problems that look simple and turn out to be really difficult. It's the way that something simple can hide a complexity that you never guessed at. Fortunately for me the universe seems to be bu [ ... ]

Mandelbrot Zoomer in WPF

The Mandelbrot set is fun, but implementing a simple viewer in WPF can be a challenge.Here's a project to plot the Mandelbrot set and allow the user to zoom in on any area of interest.

Other Projects


Last Updated ( Tuesday, 27 August 2013 )

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