如何在html中显示pgm / ppm文件？

Question

我有一个简单的pgm文件，我认为它与ppm文件相同。

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

我想在HTML文档中显示此文件。现在我尝试使用img标签和iframe。我希望这能显示实际图像而不是文本。我希望它是HTML，但我也可以使用JavaScript。

Answer 1

您首先需要阅读pgm / ppm文件的内容。然后遍历PPM文件的像素数据，该文件应该已经具有RGB值。然后你可以在html5画布上下文中使用putImageData。

Canvas Pixel Manipulation示例

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

PBM / PPM / PGB格式规范

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

Answer 2

使用canvas元素<canvas>和canvas API。您可以使用1x1矩形逐个像素地绘制。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API了解初始文档。