Javascript TGA Loader

by Vincent Thibault, posted May 27, 2013 in Blog (6 Comments)

Truevision TGA file is an image file often used in video games.

For roBrowser’s project, I had to work with this kind of files. I firstly wrote a PHP converter (tga to png) to do this process on the fly from my web host, but since my project designs changed a little and need to work with local files too, I had to implement the converter on the client-side.

Lot of videos games are using the TGA file to store textures, since browsers try to bring games to the web I think it’s a good idea to share this code.

Demo


If you don’t see the image, you should try updating your browser (it required at least HTML5Canvas and Uint8Array support).

How to use ?

It’s really easy to use:

var tga = new TGA();
tga.open( "test.tga", function(data){
   document.body.appendChild(
      tga.getCanvas()
   );
});

It’s possible to parse content without having to download it too:

// Uint8Array tga_data; // content of tga file
var tga = new TGA();
tga.load(tga_data);
//tga.getCanvas();
//tga.getDataURL('image/png');
//tga.getImageData();

It should work with all versions (8, 16, 24, 32 bits), grey or rgba, RLE or not, palette or true color.

Source Code

Github – TGA Loader

Have fun~





6 Comments

  • It is very, very cool~
    Thx!

  • I see the pic now but when I open the test.html it does not show any thing

  • Just tested it out, worked perfectly. Vincent is the man!

  • Awesome work Keyworld keep it up bro..

  • Great work !
    However, not working on Firefox/IE today.

    Error : InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

    Need to swap lines:
    req.responseType = ‘arraybuffer’;
    req.open(‘GET’, path, true);
    to have:
    req.open(‘GET’, path, true);
    req.responseType = ‘arraybuffer’;

  • Another small problem:

    I think there is a mistake at ling 86 of tga.js.

    You sould have “header.colorMapDepth !== 24″ instead of “header.colorMapSize !== 24″

    What do you think ?

Leave a comment to Tone