前言:
当前我们对“html怎么让图片居右”大体比较关注,各位老铁们都想要了解一些“html怎么让图片居右”的相关内容。那么小编同时在网上搜集了一些有关“html怎么让图片居右””的相关文章,希望我们能喜欢,我们一起来学习一下吧!头条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怎么让图片居右