如何在 html 中显示 pgm/ppm 文件？
How do I display a pgm/ppm file in html?
我有一个简单的 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。
使用 canvas 元素 <canvas> 和 canvas API。您可以使用 1x1 矩形逐像素绘制。
有关起始文档，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API。
您首先需要阅读 pgm/ppm 文件的内容。然后循环遍历 PPM 文件的像素数据，其中应该已经有 RGB 值。然后你可以在 html5 canvas 上下文中使用 putImageData。
Canvas 像素操作示例
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
PBM/PPM/PGB 格式规范
我有一个简单的 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。
使用 canvas 元素 <canvas> 和 canvas API。您可以使用 1x1 矩形逐像素绘制。
有关起始文档，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API。
您首先需要阅读 pgm/ppm 文件的内容。然后循环遍历 PPM 文件的像素数据，其中应该已经有 RGB 值。然后你可以在 html5 canvas 上下文中使用 putImageData。
Canvas 像素操作示例
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
PBM/PPM/PGB 格式规范