SimpleScreenshot

前后端混合“截屏”方案。

特性及优势

• 支持全部 CSS 属性；
• 支持小程序和浏览器；
• 所见即所得，简单方便；
• 支持客户端、服务器两种渲染方式，成本低，兼容性高。

详细介绍

示例

微信小程序示例

Web 示例

安装

npm i simple-screenshot

目录

├── build                    // 打包构建代码
├── examples                 // 示例项目
│   ├── web
│   ├── qq-app
│   └── wechat-app
├── server                   // 截屏服务
├── tools                    // 辅助工具
│   └── format_xml.html
├── index-web.js             // Web SimpleScreenshot 代码
├── index-qq.js              // QQ 小程序 SimpleScreenshot 代码
└── index-wechat.js          // 微信小程序 SimpleScreenshot 代码

教程

兼容性自测

设备	浏览器	版本	结果
小米8	Chrome	75.0.3770.101	DEMO 页面两种渲染模式均表现正常
小米8	QQ浏览器	10.7.7	DEMO 页面两种渲染模式均表现正常
小米8	搜狗浏览器	5.30.11	DEMO 页面两种渲染模式均表现正常
小米8	UC浏览器	13.1.2.1092	DEMO 页面两种渲染模式均表现正常
小米8	Firefox	68.12.0	DEMO 页面两种渲染模式均表现正常

TodoList

类型	描述	状态
bug	【Web】IOS 初次截屏 base64 图片等素材不显示
bug	【Web、QQ、Wechat】CSS 属性 默认继承和默认不继承
lession	【QQ、Wechat】文字单引号以及其它影响 JSON.parse 的字符
optimize	【QQ、Wechat】去掉手动配置 autoRenderWidthList
feature	【Web】CSS 样式全局字体内联	doing（目前仅支持 ttf 字体文件）
bug	【Web】QQ 浏览器中元素不存在伪类，但是 getComputedStyle 获取其伪类时 content 不为 none，导致伪类判断异常	fixed
bug	【Web、QQ、Wechat】拼接 xml 时如果文本节点中存在条件分割符 & 应该写成 [& amp;](去掉空格)，否则会报错 EntityRef: expecting ';'	fixed
feature	【Web】分析 document.styleSheets 筛选出那些未设置固定宽度的元素，自动应用 autoRenderWidth 规则，从而避免在初始化时通过参数设置该规则，降低使用门槛	done

开源许可协议

MIT License.

应用

名称

类型

小程序码