关于前端:一款可以一键基于博客markdown文件生成关键词云图的工具支持一键上传图片

封面图这张蕴含本篇 README.md 关键词云图和作者签名的图片，就是应用该工具库一键生成后上传到阿里云上，来作为该 README.md 的封面图的。

github 我的项目链接 draw-md-keyword，欢送 Star 和 Fork
npm 我的项目链接 draw-md-keyword，快去装置试试吧

背景

前段时间正好在接触一些生疏的技术点，为了避免忘记一些重要的点，就想着用文档的形式记录下来。在写博客的过程中，常常会在文章中列出一些技术点关键词，比方typescript node oss package-patch github action … 而这些关键词却恰好表明了本篇文章的相干涉猎内容

而后我就在脑海中有了一个大胆的想法，可不可以实现一个工具，该工具的次要作用是 能够依据输出的博客文章门路主动生成一个关键词图片，而后把这个关键词图片当作这篇文章的封面图，实现画龙点睛，突出博客次要涵盖技术点的目标

有了这个想法之后，我便陷入了茶不思饭不想的窘境中 …

在经验了一个多礼拜时长，60 余次代码提交以及 1500 行无效代码实现后，它诞生了 …

简介

这是一款能够依据用户输出的文件门路主动一键解析文件中关键词，而后随机生成一张关键词图片的工具，灵感借鉴于前端如何实现骨架屏文章

同时为了可能满足不同场景下的用户需要，你还能够通过简略的参数配置，赋予它高可定制化的能力。于此同时，为了升高用户的应用老本，配置文件默认 不须要 通过任何配置即可实现一键生成关键词图片

性能包含但不限于：

• 反对一键生成图片
• 反对一键上传阿里云
• 反对一键上传 github
• 反对配置阿里云和 github 自定义域名
• 反对复制上传链接到剪贴板生成 md 标准的图片格式
• 反对一键校验上传权限
• 反对设置图片大小
• 反对设置字体大小
• 反对设置最大关键词数量
• 反对黑 + 白的主题模式
• 反对自定义字体，目前反对手绘格调 zh 和英文圆润字体 en
• 反对各种文件夹命名格局
• 反对设置图片右下角作者签名
• …

技术点

nodejs的读写和周边能力以及 canvas 的绘画能力等

次要用到了以下一些技术：

• nodejs 读写

• nodejs 周边

  • ora
  • chalk
  • commander
  • base64-img
  • copy-paste
• canvas 绘图
• ali-oss 上传图片至阿里云
• octokit 上传图片到 github
• …

实现框架

如何应用

这是个 node 工具库，它的应用形式你能够类比于你 全局 装置的 git 或者是vue-cli

如果你还不晓得为啥能够在装置完这些全局工具库后，你就领有了在任何文件夹或者终端中应用它们来帮忙你做一些有意思的事的原理的话。那么我的倡议是你能够通过参考本工具库，实现一个属于你本人的工具脚手架，它能够辅助你做任何有意思的 魔法 的事件

言归正传，对于如何应用，我给出的答案是，你能够什么都不必做，只用执行以下几行命令：

第一步：全局装置该工具库

npm install -g draw-md-keyword

第二步：去往任何具备.md 文件的文件夹中

第三步：一键生成我的项目的配置文件 dmk.config.js

dmk init

第四步：通过命令指定要基于哪个文件一键生成你想要的关键词云图

dmk draw ./xxx/xxx.md

第五步：通过命令一键将图片上传到 oss 或者是 github 中，并默认帮你复制图片 md 格局到剪贴板，不便你利用在你的博客中

dmk github ./xxx/xxx.png
或者
dmk oss ./xxx/xxx/png

注 ：如果要应用上传图片的性能，须要先在第三步生成的配置文件中，进行相干无效的配置。如果你不确定本人配置是否正确的话，我仍然很贴心的为你筹备了一个dmk verify 命令，辅助你校验你配置的 github 或者 oss 是否无效

dmk verify oss
或者
dmk verify github

命令

配置文件

这里列出了 dmk.config.js 中的所有配置项，且都有具体的配置阐明。你齐全能够在自定义配置后生成你须要的关键词云图并进行上传。

module.exports = {
  configFileName: 'dmk.config.js', // 执行 dmk init 后，生成的配置文件的名称，不反对改变，所有命令都会读取该文件
  initConfig: () => {
    return `const dkConfig = {
  canvasConfig: {
    width: 800, // 图片宽度
    height: 400, // 图片高度
    fontSize: 20, // 字体的默认大小，字体越大，会使生成的云图中的关键词越少
    theme: 'light', // light 通明背景，dark 彩色背景
    themeLightFontColor: '#000000', // theme 为 light 状况下，绘制关键词的色彩，如果不是一个 hex 格局的色彩，会进行随机色彩绘制
    themeLightBorder: true, // theme 为 light 状况下，绘制的图片是否须要边框，默认须要
    fontStyle: 'normal', // normal 失常字体，italic 斜体（斜领会应用 Microsoft YaHei）fontFamily: 'zh' // 目前反对中英文两种字体，zh 为中文手绘体，en 为圆润英文字体，如果设置后会选中设置的字体，否则会随机进行匹配
  },
  copyAble: true,// 是否须要在上传图片后，帮你主动复制 md 图片格式到剪贴板中，不便你粘贴应用
  folderName: 'dmk', // 生成图片的文件夹名称
  format: 'yyyy-mm-dd', // 生成图片的名称的前缀，不倡议以 / 作为分隔符，因为生成时会将 / 当作文件夹分隔符，反对 yy、mm、dd、yyyy 随机排列
  max: 20, // 最多生成包含多少个关键词的云图，超出设置的值时会随机选中 10 个
  singleKeywordMaxLength: 10, // 单个关键词的最大长度，超出后会主动截取成...
  // 设置作者字段后，在生成的云图的右下角进行签名
  authorOption: {
    author: 'weirui88888', // 作者名
    font: {
      family: 'zh', // 同上，以后反对 zh 和 en
      color: '#000000', // 字体色彩，如果在暗黑模式下，请设置正确的色彩，否则看不见～
      size: 18 // 字体大小，注：作者绘制区域在 canvas 画布的右下角 100*100 大小，过多的字体或者过大的字体导致看不见～
    }
  },
  // 反对一键上传 oss，相干配置请参考 https://www.npmjs.com/package/ali-oss，只有 region、accessKeyId、accessKeySecret、bucket 是必须要正确填写
  oss: { 
    region: '',
    accessKeyId: '',
    accessKeySecret: '',
    bucket: '',
    folderName: '', // 上传图片至哪个文件夹
    host: '' // 自定义域名
  },
  // 反对一键上传 github，能够利用 gh-pages 实现集体关键词云图集库，不便前期应用，然而貌似 github 对于图片的反对不太敌对
  github: {
    personalAccessToken: '', // github 右上角 settings=>Personal access tokens=>Generate new token 生成，token 具备权限就抉择 write:packages 即可
    owner: '', // github 用户名
    repo: '', // github 仓库名，任意仓库都能够上传，但倡议利用 gh-pages 当作本人的服务器，可不便存储预览
    branch: '', // 分支名，如果利用 gh-pages 性能的话，这里应用 gh-pages
    imgPath: '', // 图片门路，任意正当的门路都能够，比方 images，图片会被上传到 images/xxx.png，比方 images/dmk，图片会被上传到 images/dmk/xxx.png
    customDomain: '' // 自定义域名，失效的前提是你上传的仓库名是形如 owner.github.io，这里的 owner 就是你下面增加的 github 用户名，并且下面配置的 branch 为 gh-pages，还有就是你配置了本人的域名，不开展陈说了，不会设置的去参考上上网相干的材料
  }
}
module.exports = dkConfig
`
  }
}

常见问题

生成图片时终端卡住

最有可能呈现问题的状况是执行 dmk draw 命令，因为该命令是通过解析你的 md 输出文件中的关键词，而后进行大量的地位布局计算，寻找具备绘制条件的计划，再进行 canvas 画布绘制，最初生成图片。呈现问题的起因 大概率 是你的配置文件中的一些配置导致无奈失常的绘制图片，次要可能有以下几点：

• 图片长和宽过小，导致无奈包容太多的关键词
• 关键词字体大小设置过大，导致无奈计算出具备绘制条件的计划
• 关键词数量过多，导致无奈计算出具备绘制条件的计划
• …

如果遇到这种问题，你只须要进行适当的参数调整，而后从新执行该命令即可

无奈上传图片

呈现这种状况只有一种可能，那就是你的相干配置项没有设置正确。比方上传阿里云 oss 的 accessKeyId 和 accessKeySecret 设置的不对，又或者是上传 github 的 personalAccessToken 没有设置正确，或者曾经过期。如果你不确定的话，能够通过应用 dmk verify oss 或者 dmk verify github 来校验下你的配置是否 OK

曾经配置了自定义域名，控制台却依然返回不带域名的资源链接

如果你配置了自定义域名，不论是 oss 还是 github，在上传完图片的霎时，我会通过你设置的自定义域名和图片相干门路，来验证该张图片是否是可被自定义域名拜访的。有时候可能因为服务器的 缓存 或者其余起因，导致我拜访时认为不存在这张图片。那我就会退而求其次，将源站图片资源链接返回给你。

这个时候你能做的就是确认两件事，一个就是确认下你的自定义域名设置是否正确，比方 oss.host 是否以 https 结尾，貌似通过 http 拜访这张图片，就会认为它不存在～
另一个要确认的就是，如果你是上传图片到 github 仓库中，那么你的 repo 肯定得是 owner.github.io 这个仓库，这里得 owner 就是你的用户名，并且 branch肯定得是gh-pages，如果你问我为什么，那么你就须要先去理解下 gh-pages 的含意和限度

上传的图片无奈间接拜访

这是因为阿里云的 oss bucket 安全策略，只有设置了自定义域名的 bucket 能力通过域名的模式拜访 bucket 中的资源，否则通过源站资源链接拜访图片时就变成了间接下载图片

总之，为了可能升高用户的应用心智累赘，我在代码实现中，做了大量的兼容解决，同时也会在执行命令出错时，贴心的通知用户是因为什么配置项的缺失或者谬误设置导致。如果你在应用的过程中，依然有一些不解的点，能够通过 issue 来进行反馈

NEXT

基于用户众口难调和应用场景各异的背景，我没方法在短时间内实现更多人性化且丰盛的自定义配置需要。但这只是一个 开始 ，最次要的是去 做和 实现，很多程序员都停留在观看文档，在心里盘算着如何实现某一个性能。这无异于在浪费时间且毫无价值。因为人的记忆是无限的，并且很多时候不是你认为的就是你认为的

接下来的工作，我会基于理论的应用场景登程，持续丰盛该工具库的性能，现有的想法有以下几点：

• 是否须要反对上传文件夹中所有图片，而不是一张张的上传
• 是否须要反对基于远端的 html url 链接进行绘制，这样就不必局限于只能基于本地的 md 文件进行图片生成了

• 是否须要通过命令行传参数的模式，容许用户自定义抉择要进行绘制的关键词类型，当初是默认会解析出 md 文件中所有强调 **** 和本义反引号 “ 蕴含的关键词

  • 反对了通过命令行传参的性能后，你就能够这样应用了：dmk draw ./xxx/xxx.md --strong代表你只须要基于你的文档中的加粗 **** 的关键词进行绘制，dmk draw ./xxx/xxx.md --code代表你只须要基于你的文档中的本义反引号 “ 中关键词进行绘制
• 当初反对的几种字体都是网上找的可商用的，放在工程中还是有点大，思考再反对一个命令，能够一键反对用户应用自定义网络上的任意字体，至于该命令叫啥，还没有想好 …

因为我一个人的能力和工夫是无限的，就我当初回忆来看，代码实现中，还是有着一些不太如人意的实现。比方：

• 如何计算，可能使得 canvas 画布的无效绘制区域更加大，并且放弃着关键词不被绘制重叠的，当初是先大量的计算出不相交的圆，而后在圆中写入关键词
• 如何计算，能力使得绘制的区域不会笼罩到右下角的作者绘制区域，当初是提取作者绘制区域的一些关键点，应用 canvas 的 isPointInPath Api 能力，判断关键点不得位于行将要绘制的圆的区域内
• 暂未实现依据关键词的数量，主动的设置字体大小，让所有关键词都能够主动被绘制进去
• 对于字体读取的问题，因为这个库最终你会通过全局装置的形式在本地进行装置，绘制时应用的字体也是你本地的字体文件门路，我对当初的字体文件门路援用不太确定是否正当，或者有没有更适合的计划，因为它可能波及到你本地 node 装置的版本有哪些，如果你有更好的见解，欢送 prs
• …

如果这正撞到你的枪口（善于点）上了，那么欢送你参加进来，做强做大，造福人类

提醒

• 该包中用到的 canvas 在装置的时候可能会呈现一些莫名其妙的问题，起因貌似是该包同零碎环境配置相干的问题。网上有很多人在应用该包时遇到了相似的问题，如果你是那个幸运儿，那么能够依据你控制台的报错信息，网上寻求无效的解决办法。
• 因为该工具库中涵盖了几种字体，它们的体积相对来说还是偏大的，所以在全局装置的时候，可能会在网慢的状况下略微有点慢，后续思考如何优化
• 对于图片上传相干的密钥信息，不要随着 dmk.config.js 文件上传到你的仓库中，你能够将生成的 dmk.config.js 文件放到.gitignore 中
• 尽管 github 给咱们提供了一个收费的服务器，能够用来做一些简略的我的项目搭建，比方博客和个人主页，但它貌似只局限于在一个仓库中应用。同时貌似对于图片的反对水平不太敌对，还有就是比较慢。所以还是倡议应用第三方云工具，有想配置却不会配置的，能够参考我的这篇如何创立一个具备 cdn 减速的域名的 oss bucket 文章

彩蛋

因为该工具库中，封装了一套残缺的上传图片计划，目前反对 阿里云 oss和 github。所以我在想，会不会有以下一种可能，那就是如果你 曾经 全局装置了该工具库，那么在你的任何工作目录中，你就只须要执行以下三步，就能够将你本人心仪的图片进行上传，用以节俭一些工夫。

第一步：生成 dmk.config.js 配置文件
dmk init

第二步：配置 dmk.config.js 中的相干上传选项，删除 canvas 相干的配置

第三步：选中心仪的图片进行上传
dmk < github | oss > ./xxx/xxx.png

参加