javascript - 如何以 html 格式显示 pgm/ppm 文件?

标签 javascript html image pgm

我有一个简单的 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。

最佳答案

您首先需要阅读 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 格式规范

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

关于javascript - 如何以 html 格式显示 pgm/ppm 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40113669/

相关文章:

javascript - React/Redux + Soundcloud API

javascript - 图片由 CSS 随机旋转

python - 抓取图片链接的问题

html - 图像高度是相对于文件大小而不是父 div(整页水平滚动画廊)

javascript - jQuery 在悬停时滚动到 div 并返回到第一个元素

javascript - Node.js 中的请求函数执行无序

javascript - 带有 promise 和闭包范围的延迟加载

html - 我的 div 在较小的分辨率下变得不对齐?

javascript - 如何在页面宽度为 div 的 div 中滚动内联无序列表? (查询)

javascript - 如何使导航栏固定在特定 div 而不是页面的顶部