头条截图分享的实际效果图
目前前端利用较多的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的官网。
内容比较大略，大家如果有这个运用处景，可以参考实现一下，有问题欢迎大家随时互换。感激大家的支持。
