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.

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.

• javascript
• html
• image
• pgm

• Please look at the question I have already stated both of these but here they are again. I have tried using an img and iframe tag. I want it to display a pgm image if you need more info on this look here. – Preston Hager Commented Oct 18, 2016 at 18:37

2 Answers 2

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/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

PBM/PPM/PGB Format Specs

https://en.wikipedia/wiki/Netpbm_format

Use the canvas element <canvas> and the canvas API. You can use a 1x1 rectangle to draw pixel by pixel.

See https://developer.mozilla/en-US/docs/Web/API/Canvas_API for a starting documentation.