条APP上有个截图分享功能，就是把文章转成一张图片，然后分享到各渠道中去，如微信、QQ等，非常实用，因此，打算就这项功能自己封装为一个组件ImageGenerator，后期专门进行图片生成，html是其中的一个源。

目前前端使用较多的html转图片的工具是Html2Canvas，考虑技术储备和问题讨论的充裕性，决定封装一下这个工具。步骤如下：

安装HTML2Canvas

按照官方要求，做安装操作：

npm

npm install html2canvas

我当时下载的是1.4.1的版本。

这个工具有自身的一些限制，使用时要注意：

[1] 并非真正的截图软件，而是根据DOM绘制出来的，其绘制能力，完全依赖于工具对DOM和对应属性的支持和理解;

[2] 因为使用了Canvas支持，生成图片的区域不能再有Canvas应用，否则会干扰工具的生成，不能保证生成预期，因此，如果使用了Canvas图表的应用这个工具不推荐使用

封装ImageGenerator

这个很简单，这里就是封装一个组件，用于后期引入html之外的源生成图片，同时也做一下图片的统一显示，从而和系统整体的设计进行配合。大致的实现思路如下：

上图，我们引入了工具本身，并设置的结果的显示区。生成的结果将以节点的方式注入 #image-box 中。

上图，封装了一个方法，用途是利用Html2Canvas工具获得图片，这里我们引入了一个组件的数据imageData用以存储和干预生成结果。在这里，我把ImageGenerator封装为全局组件。

应用场景

我们在文章的尾部加入一个share功能，点击弹出分享设置的弹窗，实际效果如下图所示：

以上技术实现比较简单，这里就不进行赘述了。上图中，我们设置了一个生成图像按钮，点击该按钮则可以触发我们组件中的对应操作。关键思路包括：

【1】这里设置了一个封装组件shareHandler，封装了前导模块和imageGenerator，这两个模块的显示通过一个开关进行控制，该开关则通过图像生成成功事件进行赋值，这样的话，我们可以实现图片生成后，不再显示前导模块，而是显示图片结果，即ImageGenerator。

【2】这里有一个比较关键的操作是shareHandler通过触发事件将转换器发射到文章转换现场，为什么用事件，还是那句话，事件对于解耦和消除组件依赖是最自然的实现。注意，这里我把imageGenerator通过引用的方式作为参数传出了，这样的好处是事件将转换器代入了转换现场，并可以携带回现场转换结果。

【3】在文章查看器，solutionViewer中，自然会订阅事件、事件处理和取消订阅。注意这里的事件处理，实际上是调用了转换器中我们封装的函数，参数则是现场取得的，这里的机制很简单，定义要转换div的id，作为参数传入函数。

那么，点击图像后，我们可以看到效果图：

点击右键另存图像，我们可以获得一张png格式的图片，至于后续对下载和到粘贴板的支持，大家可以自行研究和实现。

注意事项

实现过程中有几个注意事项：

【1】Canvas返回时，其长宽都是按照实际大小生成的，而我们的例子中，则要根据右抽屉式的弹窗做width=100%，height=auto的处理，这个要如何实现，就是要通过我们在imageGenerator中引入的imageData。

【2】我们的文章显示中，引入了文件管理的微服务，因此，文章中图片的链接都是跨域的，所以，必须打开html2Canvas的跨域选项，在封装的组件里，我是通过一共一个defaultOptions来实现这一点的。

这个选项可以在转换场景提供，也可提供一系列的默认值，最常用的除跨域外，还有是否允许log输出等开关，大家感兴趣可以自行查阅html2Canvas的官网。

内容比较简单，大家如果有这个应用场景，可以参考实现一下，有问题欢迎大家随时交流。谢谢大家的支持。

字中夹着图片，图片也需要文字说明，文字和图片相辅相成，就有了绚丽多彩的网页内容。但是图文混排的方式却给我们存储数据带来不便，实际上大多数网页是把文字和图片分别存放在不同文件中的，在html源码中只保存图片的链接地址。

如上图所示，在做数据采集时，很多朋友把文字和图片分别下载保存，还要处理链接本地化转换的问题。实际上我们也可以把图片文件转码后保存在html源码文件里，这样用一个html文件就可以保存图文信息了，自动采集图文步骤如下。
打开木头浏览器项目管理窗口，创建【打开网页】步骤，添加需要采集的页面网址，如果添加多个网址，则可以按顺序打开采集内容。

然后添加最关键的步骤【抓取内容】，【添加】抓取内容，在弹出的【抓取元素设置】窗口，点击【自动获取】按钮，浏览器将处于元素定位模式，鼠标移到需要抓取的元素内容上方点击右键，在弹出的快捷菜单中选择【获取元素并返回】，成功获取可唯一标识该元素的方法，如下图所示，此以页面使用元素的ID属性定位等抓取的元素区域，设置获取元素的【TagTextToHtml】扩展属性，意思是把元素内容转化为Html代码。如有必要，可以使用同样的方法继续添加抓取页面文章标题，此处不再赘述。

抓取元素转换成html后，就是保存数据了，创建【保存数据】步骤，勾选【保存变量文件】，选择Htm文件格式，设置文件保存路径。

最后，点击【开始测试】按钮运行项目，当项目执行完毕后，打开设定的保存文件目录，就可以看到自动保存和htm文件，且只有这个文件，双击自动调用浏览器打开，完整呈现图文内容。图片已经转成了Base64编码，嵌入保存在htm文件中。