Skip to content

Latest commit

 

History

History
70 lines (42 loc) · 4.42 KB

示范文章之截图之制作指南.md

File metadata and controls

70 lines (42 loc) · 4.42 KB
Raw

吴乐川的 HTML 文章排版与配色之方案之示范文章之截图制作指南

导航

Multilingual Editions of this Article

  • N/A.

术语

【全幅画面】与【非全幅画面】

  • 所谓“全幅”画面，是指截图过程中多次调整滚动条位置并最终拼接出超长画面，该画面是文章之完整样貌。

  • 所谓“非全幅”画面，是指截图过程中不多次调整滚动条位置并最终拼接出超长画面，而是仅直接截取浏览器绘图视口所呈现之画面。该画面显然仅是文章全幅之局部尔。

对屏幕分辨率设置方面的建议

如果你的电脑采用了 Windows 10 、 Windows 11 操作系统，且 Windows 将你的电脑屏幕之画面比例调节为高于 100%，那么我建议你在制作文章截屏时临时将其降低至 100% 。

若沿用高于 100% 之画面比例，非但会令截图异常巨大，而且可能令很多截图工具之结果异常。例如，在进行宽尺寸全幅画面之截图时，最终成图竖直解析度可高达六万多像素，文件尺寸在 20 百万字节左右。此时，或许因为文件解析度过高，火狐内建之截图功能往往出现内容缺失之现象。

制作工具之能力对比

火狐浏览器内建之截图功能

施展情形或技术要求 缺陷或障碍定性 出现的缺陷或障碍
当采用超高分辨率直接截图时 严重妨碍。但可通过降低计算机屏幕分辨率予以避免。 超长截图尾部代码块、表格之内容空白。
应展示 -webkit-scrollbar 之自定义样式 轻微遗憾 不能。因为它是火狐。
制作窄屏幕截图时，文章纲要应配备模糊背景 中度遗憾 不能。即便人为开启火狐于此相关之技术开关，在正常渲染时可以看到模糊背景之效果，但截图时模糊背景效果消失，且截图画面尺寸无端被拓宽了。

以 webkit 为内核之 Edge 浏览器内建之截图工具

施展情形或技术要求 缺陷或障碍定性 出现的缺陷或障碍
当采用超高分辨率直接截图时 严重妨碍 超长截图尾部被截去，画面不完整。
当采用高清（1920）分辨率截图时 严重妨碍 超长截图尾部仍会被截去，画面不完整。
画面应清晰、充满细节 严重妨碍 仅允许采用 .jpeg 文件格式，且超长截图之细节糊涂不清。
应可轻松选择浏览器绘图视口当前之全貌 严重妨碍 不能。
应展示视频之画面 中度遗憾 视频画面全黑。
应展示 -webkit-scrollbar 之自定义样式 轻微遗憾 正常渲染时无误，但截图时滚动条一律消失，仅占位。
预先配置或预先设计程序化之途径来定制截图文件之名称 轻微遗憾 不能。

以 webkit 为内核之 Edge 浏览器之扩展工具 FireShot

施展情形或技术要求 缺陷或障碍定性 出现的缺陷或障碍
文章中“返回顶部”之按钮之效果应准确无误 中度遗憾。但可以手工修复。 浏览器在开启“移动设备布局仿真”功能后，“返回顶部”按钮不完整。
在开启“移动设备布局仿真”功能后，即便浏览器尺寸小于所仿真之尺寸，截图画面仍应完整 中度遗憾。但可以避免。 不完整。
预先配置或预先设计程序化之途径来定制截图文件之名称 轻微遗憾 不能。

结论

  1. 应令计算机屏幕之分辨率尽可能高，不妨恢复至最高分辨率。

  2. 应令计算机屏幕画面比例为 100% 。

  3. 应首选 Edge 浏览器之扩展工具 FireShot。

  4. 次选火狐浏览器内建之截图功能。且务必令火狐浏览器之 layout.css.backdrop-filter.enabled 选项取 false 。

  5. 不应采用 Edge 浏览器内建之截图功能！