生成图片

最近在写文章时经常会用到截图，发现每次截图都很麻烦，而且截取的图片有时候清晰度不够，于是在网上找了一下是否有那种代码生成图片的工具，果然还是有的。其中，常见的两种工具分别为carbon和polacode，下面会对他们的使用做一个简单说明。1、carboncarbon，这款工具可以帮助开发人员快速地生成优雅、美观、具有设计感的图片，废话不多说，直接上图看效果： 生成图片效果如下，是不是很美观 carbon的应用过程非常简单，可以直接将代码复制到https://carbon.now.sh官网中去生成图片，还可以在IDE中安装carbon插件使用，下面简单说一下第二种使用方式：先安装carbon-now-sh插件，然后选中想要生成图片的代码，接着在view->command palette中输入carbon命令，会自动跳转到官网，选择您喜欢的样式主题生成图片。 注意：carbon工具有一个缺点，它支持的代码行数不能超过100。参考链接：https://github.com/carbon-app/carbon 2、polacodepolacode，这款工具跟carbon类似，但它使用没有carbon方便，功能也比不上carbon。polacode生成图片的样式主题需要自己手动去配置，图片在视觉上也没有carbon美观，具体差别大家可以亲自去试试，这里就不作说明了。先来看看它的效果图： polacode的使用方式跟carbon的第二种使用方式一样，这里不做多余描述。 注意：如果像生成图片的代码行数超过100可以使用polacode。参考链接：https://github.com/octref/polacode

如果您有一个需求是将网页生成一个快照的图片，然后需要用到该图片上传或者发送给他人的这样的需求，那么你会怎么做呢？聪明的你可能会想到canvas是否可以生成一个这样的图片呢？没错，今天就给大家推荐一个简单又好用的工具html2canvas。准备文件进入该官方网站点击此处，在官网首页开始下载资源文件，html2canvas.js或者html2canvas.min.js皆可。将该资源文件引入您需要使用该功能的页面中。开始使用给您想转换成图片的盒子标签上添加一个唯一id，这样便于找到该DOM节点。按照官方文档相关参数设置并添加代码在合适的地方来进行图片转换。html2canvas(document.querySelector("#app")).then(canvas => { document.body.appendChild(canvas)});详细使用相关参数设置可参考该官方文档，根据需要设置即可。兼容性介绍Firefox 3.5+Google ChromeOpera 12+IE9+EdgeSafari 6+关于vue-cli中使用最新版本应该可以直接通过yarn或者npm引入了，可参照官网首页介绍npm install –save html2canvas或者yarn add html2canvas如果有相关问题，还可参考另一篇文章点此查看