Search code examples
javascripthtmlimagepgm

How do I display a pgm/ppm file in html?

I have a simple pgm file, which I think is the same as a ppm file. 

P3

5 5
10

1 2 3 4 10
1 10 3 2 5
10 2 4 2 1
0 0 0 0 0
10 10 10 10 10

I want to display this file in an HTML document. Right now I have tried using the img tag and an iframe. I want this to display the actual image and not the text. I would like it to be HTML but I can also use javascript.

Solution

  • You'll first need to read the contents of the pgm/ppm file. Then loop through the pixel data of the PPM file, which should already have the RGB values. Then you could use putImageData on the html5 canvas context.

    Canvas Pixel Manipulation Examples

    https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

    PBM/PPM/PGB Format Specs

    https://en.wikipedia.org/wiki/Netpbm_format