封面图本图包含关键词云图和本README.md作者签名，即使用此工具库的一键式工具生成后上传至阿里云作为README.md的封面图。github项目链接draw-md-keyword，欢迎Star和Forknpm项目链接draw-md-keyword，去安装它并尝试它记录。在写博客的过程中，文章中经常会列出一些技术性的关键词，比如typescriptnodeosspackage-patchgithubaction...但是这些关键词只是表明了本文的相关内容，接下来我会加粗脑子里的想法，能不能实现一个工具，主要功能是根据输入的博文路径，自动生成一张关键词图片，然后用这张关键词图片作为本文的封面图，来画龙点睛，突出博客的目的，主要涵盖技术点。有了这个想法之后，我陷入了两难的境地……经过一个多星期，60多条代码提交，1500行有效代码实现后，就诞生了……简介这是一个可以自动分析代码的工具根据用户输入的文件路径，一键搜索文件中的关键词，然后随机生成关键词图片。灵感来自于前端是如何实现骨架屏的，同时为了满足用户在不同场景下的需求，还可以通过简单的参数配置，赋予其高度可定制的能力。同时，为了降低用户的使用成本，配置文件默认不需要任何配置，实现一键生成关键词图片。功能包括但不限于：支持一键生成图片支持一键上传阿里云支持一键上传到github支持配置阿里云和github自定义域名支持复制链接上传到剪贴板生成md标准图片格式支持一键验证上传权限支持设置图片大小支持设置字体大小支持设置最大关键字数支持黑白主题模式支持自定义字体，目前支持手写paintedstylezh和英文mellowfontsen支持各种文件夹命名格式支持在图片右下角设置作者签名...技术点主要是nodejs的读写和周边能力以及的绘画能力canvas以下技术：nodejs读写nodejs外设orachalkcommanderbase64-imgcopy-pastecanvas画ali-oss上传图片到阿里云octokit上传图片到github...框架如何实现这是一个node工具库，用法可以和你的比较全局安装git或者vue-cli如果你不会知道为什么，在安装了这些全局工具库之后，你就有了在任何文件夹或终端中使用它们来帮助你做一些有趣事情的原则。那么我的建议是，你可以参考这个工具库，实现一个属于你自己的工具脚手架，它可以辅助你做任何有趣的神奇的事情。无需操作，执行以下几行命令即可：第一步：全局安装工具库npminstall-gdraw-md-keyword第二步：进入任意有.md文件的文件夹第三步：一键生成工程配置文件dmk.config.jsdmkinit第四步：使用命令指定哪个文件生成你想要的关键字云图一键生成dmkdraw./xxx/xxx.md第五步：使用命令设置上传图片到oss或者github，默认帮你把md格式的图片复制到剪贴板，方便你在博客中使用dmkgithub./xxx/xxx.png或者dmkoss./xxx/xxx/png注意：如果要使用上传图片功能，需要在第三步生成的配置文件中进行相关有效的配置。如果你不确定你的配置是否正确，我还是为你精心准备了一个dmkverify命令，帮助你验证你配置的github或oss是否有效。dmkverifyoss或dmkverifygithub命令支持命令参数命令说明dmkinit不会生成默认配置可用的配置文件，所有用户自定义的配置都在这里设置dmkdrawmd-filepath根据你输入的md格式的文件路径和你自定义的配置，会根据你输入的图片路径生成一个包含文件关键字的随机样式Imagedmkosspng-filepath根据你输入的图片路径自定义上传图片到阿里云ossdmkgithubpng-filepath根据你输入的图片路径png格式和你自定义的配置上传图片到云端github上的阿里dmkverifyoss\github，验证配置文件中关于上传图片的一些参数设置是否正确，即你设置的token是否正确。配置文件这里列出了dmk.config.js中的所有配置项。并且有详细的配置说明。自定义配置后即可完全生成并上传您需要的关键词云图。module.exports={configFileName:'dmk.config.js',//dmkinit执行后，生成的配置文件名不支持修改，所有命令都会读取文件initConfig:()=>{return`constdkConfig={canvasConfig:{width:800,//图片宽度height:400,//图片高度fontSize:20,//默认字号，字号越大，云端生成的关键词越少imagetheme:'light',//浅色透明背景，深黑色背景themeLightFontColor:'#000000',//当主题为浅色时，绘制关键字的颜色，如果不是十六进制格式的颜色，则会绘制随机颜色themeLightBorder:true,//当主题为浅色时，绘制的图片是否需要边框，默认fontStyle:'normal',//normalnormal字体，italic斜体（微软雅黑会用斜体)fontFamily:'zh'//目前支持中英文两种字体，zh为中文手绘字体，en为圆形英文font，如果设置，则选择设置的字体，否则随机匹配},copyAble:true,//上传图片后需要自动为你复制md吗？图片格式到剪贴板，方便你粘贴usingfolderName:'dmk',//生成图片的文件夹名称format:'yyyy-mm-dd',//生成图片名称的前缀，它不建议使用/作为分隔符，因为/会在生成时作为文件夹分隔符，支持yy,mm,dd,yyyy任意排列max:20,//最多生成多少个关键字在云图中，超过设置值会随机抽取10singleKeywordMaxLength:10,//单个关键词的最大长度，超过则自动截取成...//设置author后字段，在生成的云图右下角签名authorOption:{author:'weirui88888',//作者姓名font:{family:'zh',//同上，目前支持zh和encolor:'#000000',//字体颜色，如果是深色模式，请设置正确的颜色，否则看不到~size:18//字体大小，注：作者绘图区域为画布右下角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:'',//settings=>个人访问令牌=>在github右上角，如果token有权限，选择write:packagesowner:'',//github用户名repo:'',//github仓库名，任意仓库都可以上传，但是推荐使用gh-pages作为自己的服务器，可以方便的存储和预览simgPath:'',//图片路径，任何合理的路径都可以，比如images，图片会上传到ima??ges/xxx.png，比如images/dmk，图片会上传到ima??ges/dmk/xxx.pngcustomDomain:''//自定义域名，生效的前提是你上传的仓库名是owner.github.io的形状，其中owner是你上面添加的github用户名，上面配置的分支是gh-pages，你配置了自己的域名。不展开语句就不会设置为参考网上的相关资料}}模块。exports=dkConfig`}}常见问题最有可能的问题是执行dmkdraw命令，因为该命令是分析你的md输入文件中的关键字，然后进行大量的位置布局计算，寻找解决方案满足绘图条件，然后在画布上绘图。最终生成的图片出现问题的原因很大可能是你配置文件中的某些配置导致无法正常绘制图片。主要可能的点有以下几点：图片的长宽太小，会容纳不了太多的关键词。如果关键字字号太大，将无法计算出满足绘图条件的方案。关键字太多会导致无法计算出满足绘图条件的方案...如果遇到这种问题，只需要调整合适的参数，然后重新执行命令上传图片失败.这种情况只有一种可能，就是你的相关配置项没有设置正确。比如上传到阿里云oss的accessKeyId和accessKeySecret设置不正确，或者上传到github的personalAccessToken设置不正确，或者已经过期。如果不确定，可以使用dmkverifyoss或者dmkverifygithub来验证你的配置是否OK。配置了自定义域名，但是控制台返回的资源链接仍然没有域名。如果你配置了自定义域名，无论是oss还是github，在图片上传的那一刻，我会通过你设置的自定义域名和图片相关路径验证图片是否可以被自定义域名访问。有的时候可能是服务器的缓存或者其他原因，访问的时候觉得这张图片不存在。然后我会退而求其次并将源图像资源的链接返回给您。这时候你能做的就是确认两件事。一是确认您的自定义域名是否设置正确。比如oss.host是否以https开头。好像如果通过http访问这张图片，它会认为它不存在。需要确认的一点是，如果你是上传图片到github仓库，那么你的repo必须是owner.github.io仓库，其中owner是你的用户名，branch必须是gh-pages，如果你问我的话为什么，那你需要了解gh-pages的意思，限制上传的图片不能被直接访问。这是因为阿里云的ossbucket安全策略。只有自定义域名的桶才能通过该域名。访问bucket中的资源，否则通过源站资源链接访问图片时，会变成直接下载图片。当执行命令出错时，它会贴心地告诉用户缺少或设置错误的配置项。如果大家在使用过程中还有一些不理解的地方，可以通过issue反馈NEXT基于不同用户背景，不同使用场景，短时间内无法做到更加人性化和丰富的定制化。定义配置要求。但这只是开始，最重要的是去做和实现。很多程序员都停留在文档里，思考如何实现某个功能。这是浪费时间而且毫无价值。因为人的记忆力是有限的，很多时候不是你想的就是你想的就是下一个任务。我会根据实际使用场景不断丰富工具库的功能。现有思路如下：是否需要支持上传文件夹中的所有图片，而不是一张一张上传？是否需要支持基于远程htmlurl链接的绘图，从而不必局限于只能根据本地md文件生成图片？你需要使用命令吗？传递参数的形式允许用户自定义绘制的关键字类型。现在，默认情况下，它将解析md文件中强调的****和转义反引号``中包含的所有关键字。通过命令行支持传递参数函数后，可以这样使用：dmkdraw./xxx/xxx.md--strong表示只需要根据文档中的粗体****关键字进行绘制，DMK平局。/xxx/xxx.md--code表示您只需要根据文档中转义反引号``中的关键字进行绘制。目前支持的几种字体都是在网上可以买到的，目前还在项目中使用。它有点大。我正在考虑支持另一个命令，它可以支持用户一键使用自定义网络上的任何字体。至于命令的名字，我还没想好。。。因为我一个人的能力和时间有限，只有我现在回头看，在代码实现上还有一些不尽如人意的地方。例如：如何计算可以让画布的有效绘图区域变大，让关键字不被重叠绘制。现在就是先计算出大量不相交的圆圈，然后在圆圈里面写关键词。如何计算，为了让右下角的绘制区域不覆盖作者绘制区域，现在是提取作者绘制区域的一些关键点，利用canvas的isPointInPathApi能力判断关键点必须不位于要绘制的圆的区域内。根据关键字的个数，自动设置字体大小，从而自动绘制所有关键字。关于字体读取的问题，因为这个库最终会通过全局安装安装到本地，所以绘图时使用的字体也是你本地的字体文件路径。不知道现在的字体文件路径引用是否合理，或者有没有更合适的解决方案，因为可能涉及到你本地node安装的版本。如果你有更好的Opinion，欢迎pr...如果这正中你意（goodpoint），那么欢迎你参与进来，把它做强做大，造福人类。Tips这个包中使用的canvas可能会出现一些莫名其妙的问题，原因好像是这个包跟系统环境配置有关。网上很多人在使用这个包的时候都遇到过类似的问题。如果幸运的话，您可以根据控制台中的错误消息在线找到有效的解决方案。由于工具库涵盖了几种字体，体积比较大，所以全局安装的时候，网速慢的时候可能会有点慢。后续考虑如何优化图片上传相关Key信息，不要上传dmk.config.js文件到你的仓库，你可以把生成的dmk.config.js文件放在.gitignore中，虽然github给我们提供了免费服务器可以用来做一些简单的项目搭建，比如博客，个人主页，不过好像仅限于一个仓库使用。同时好像对图片的支持不是很友好，比较慢。因此，推荐使用第三方云工具。如果想配置不知道怎么配置，可以参考我的文章如何创建带CDN加速域名彩蛋的ossbucket。因为这个工具库封装了一套完整的上传工具图片方案目前支持阿里云oss和github。所以我在想有没有一种可能，就是如果你已经全局安装了工具库，那么在你的任意一个工作目录下，只需要执行以下三个步骤就可以把你喜欢的放上去，这样可以节省一些时间。第一步：生成dmk.config.js配置文件dmkinit第二步：在dmk.config.js中配置相关上传选项，删除canvas相关配置第三步：选择中心工具的图片上传dmk
