一款能够一键生成要害词云图的小东西

封面图这张包括本篇 README.md 要害词云图和作者签名的图片，便是运用该东西库一键生成后上传到阿里云上，来作为该 README.md 的封面图的。

布景

前段时刻正好在接触一些陌生的技能点，为了防止遗忘一些重要的点，就想着用文档的方法记录下来。在写博客的过程中，常常会在文章中列出一些技能点要害词，比方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
  • …

完成框架

image-20220705212314712

怎么运用

这是个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 init 无 生成默许装备可用的装备文件，用户自定义装备全在这儿边设置
dmk draw md-filepath 依据你输入的 md 格局的文件途径和你的自定义装备生成一张随机样式且包括文件要害词的图片
dmk oss png-filepath 依据你输入的 png 格局的图片途径和你的自定义装备上传图片到阿里云 oss 上
dmk github png-filepath 依据你输入的 png 格局的图片途径和你的自定义装备上传图片到阿里云 github 上
dmk verify oss | github 校验你在装备文件中关于上传图片的一些参数设置项是否正确，也便是你设置的 token 对不对

装备文件

这儿列出了 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

参加