如何在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。

帆布像素處理例子

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>和畫布API。您可以使用1x1矩形逐個像素地繪製。

請參閱https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API瞭解最初的文檔。