关于前端:命令行操作生产svg动图

代码片段生成带高亮成果的丑陋图片咱们能够应用 carbon

然而如果想制作命令行操作的动图个别是录屏来转换成 GIF 图，其实还有另一种形式，咱们能够应用asciinema + svg-term 生成 SVG 图片

示例图片

长处

• 操作过程简略
• 更小的文件体积
• 矢量
• 能够手动批改速度和文案
• 文字能够复制
• 跨平台

首先须要装置 asciinema 和 svg-term

装置 asciinema

svg-term 装置比较简单

npm install -g svg-term-cli

第二步：装置实现后，先应用 asciinema 开始记录

# 默认会应用 /bin/bash 作为 shell
asciinema rec

我运行了上面两行代码

# fuc 是 file-uploader-cli 的简写
fuc -t github -c github.json
fuc test.svg

file-uploader-cli 是一个命令行文件上传工具，能够通过命令行上传文件到 github，阿里云对象存储，七牛云对象存储等。能够不便的用做 图床上传工具 ， 也能够在 Typora 中应用：当插入图片时会主动上传并替换为网络图片地址。

退出 asciinema 记录能够应用 Ctrl + D, 也能够间接键入 exit。退出时咱们抉择键入 ctrl+ c 来保留记录到本地。

asciinema 生成的记录大略是这样

{"version": 2, "width": 101, "height": 24, "timestamp": 1614856599, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
[0.016438, "o", "\u001b[?1034hbash-3.2$"]
[0.664553, "o", "fu"]
[0.664684, "o", "c -t github -c"]
[0.664785, "o", "github.json"]
[1.189336, "o", "\r\n"]
[1.272668, "o", "bash-3.2$"]
[2.81004, "o", "fu"]
[2.810274, "o", "c test.svg"]
[3.2536, "o", "\r\n"]
[3.972172, "o", "https://cdn.jsdelivr.net/gh/Iamxiaozhu/file-uploader-cli/test.svg\r\n"]
[4.982049, "o", "bash-3.2$"]
[7.350391, "o", "exit\r\n"]

能够间接批改工夫参数来调整速度,

第三步：依据第二步生成的本地记录生成 svg

svg-term --in /var/folders/0k/25hwq5v57j5dfg7xk9966k4c0000gp/T/tmpyckli_c2-ascii.cast 
    --out ./test.svg --height 9 --width 60 --window

--in 指定配置所在地址

--height 生成 SVG 图片高度

--width 生成 SVG 图片宽度

--out 输入 svg 图片

--out SVG 图片是否带边框