简介： 如何利用web实现挪动端高还原度富图文分享?
作者：闲鱼技术-苑振一
背景
分享是流传流动，吸引用户最重要的一环。现有分享伎俩多是题目配合单张图片，利用点击的形式跳转到指标页面。在信息越来越丰盛的明天，单个题目和图片对用户的吸引力是无限的。而在对推广要求更高的营销场景和裂变过程中，咱们往往须要将页面内容一部分作为图片整体分享进来。间接利用手机原生的截屏性能会有几个问题：1）内容格局无奈自定义。2）翻页状况无奈解决。3）视窗区域不可控。本文通过探讨现有截屏的计划和闲鱼外部截屏计划，介绍如何利用web实现挪动端高还原度富图文分享。
现有计划
Html2Canvas
介绍
html2canvas是一种基于canvas，将DOM构造绘制在canvas下面产生图片的第三方库。通过如下的形式能够将对应的DOM构造绘制成图片保留进去。劣势在于上手简略，使用方便。
绘制原理
原理如下图所示。外围逻辑是克隆对应节点DOM构造，利用parse解析成数据，构建canvas进行内容绘制，返回对应的canvas。
理论应用过程中发现大略有如下几个问题
- 图片跨域不反对。生成的图片存在跨域限度问题。
- 绘制清晰度低。即便应用api
scale放大后绘制，又会因为生成base64格局图片内容过长导致无奈传输。 - 圆弧计算精度低。因为html2canvas是计算像素后绘制到canvas上，而canvas展现又会通过浏览器绘制，导致像素精度升高。
- 深度节点呈现彩色状况。因为DOM构造过深，通过像素计算后，会偶然呈现像素失落状况。
SVG
介绍
该计划是利用svg能够包裹DOM构造的个性，将对应指标装载进去，之后将svg导出成base64格局的图片。应用形式如下。通过xmlns指定命名空间，避免多汇合下元素和属性的抵触。后缀中的svg和xhtml别离示意解析形式。利用不同的解析形式，实现了svg外部嵌入html的形式。
之后只有通过encodeURIComponent(svg)将对应的svg转换成base64就能够。劣势是容易上手且不依赖第三方库。
理论应用过程中发现大略有如下几个问题
- SVG无奈连贯到内部的资源。比方通过cdn引入的css以及html中的图片连贯都会被限度。
- 不反对js执行。现如今SPA页面都须要执行JS后才会渲染对应的DOM节点，而SVG却不反对JS的执行。
- SVG地位和大小不确定。遇到须要及时展现的状况，须要实时计算地位才行。
解决方案
思路
从下面能够看到，现有的两种支流挪动端截屏计划都有本人的有余。相比之下，利用canvas绘制的办法更适宜SPA利用。那么咱们须要解决的是html2canvas对应的几个问题：图片跨域，清晰度低，圆弧计算精度差，深层节点解析出错。
图片跨域
通过new Image()的形式生成图片，在image.onload阶段应用canvas绘制图片。此时会产生跨域限度，须要通过crossOrigin = 'Anonymous'设置来解决这个问题。
进步清晰度
在绘制中发现，如果采纳宽度375px的canvas将图片导出，会呈现图片含糊的状况。一种计划是进步原图片清晰度，然而加载速度会大大提高，用户体验不敌对。另一种形式是放大canvas，利用drawImage中的参数管制图片坐标和canvas中的绘制坐标。drawImage中蕴含几个参数：管制图片的sx, sy, sWidth, sHeight和管制canvas绘制的x, y, width, height。参数具体含意如图中所示。
将办法中width和height乘上ratio，放大图片，管制绘制坐标，就能在canvas特定地位上绘制出想要的内容。思考到小canvas在展现阶段清晰度足够，仅保留阶段须要放大三倍绘制的个性，采纳第二种办法在简直没有进步性能开销的前提下，进步清晰度。咱们以理论绘制截图来看一下成果。下图右边是一倍后果，右图是三倍后果。
圆弧精度晋升和深层DOM解析
圆弧精度低和深层DOM解析出错问题实质上还是因为DOM构造过于简单，当采纳通用计划解决时，不免无奈笼罩。思考到挪动端内容无限，构造简略的特点。决定采纳特定DOM节点针对性绘制的计划解决深层DOM解析出错的问题。益处如下：1）办法原子化，保护简略。2）绘制高度自定义化，自在组织界面构造。3）拓展性强。在共事胖仔的帮忙下实现特定DOM节点绘制计划。计划构建过程中次要有如下几个难点：圆角矩形，文字主动换行。
圆角矩形：通过截断的形式绘制特定背景的圆角矩形。原理是通过
createPattern的形式在canvas上获取图片内容，再利用Path的形式，绘制对应的路线，利用canvas.arc绘制圆弧局部，利用canvas.lineTo绘制直线局部，截取想要的内容，实现圆角矩形。图片内容获取。
`context.createPattern(imgUrl, "no-repeat")`圆角矩形区域绘制
绘制内容
- 文本主动换行：思路是通过
measureText取得以后文本宽度，每次增加一个字，比对此时文本宽度和行宽，超过时候绘制以后行，进行换行，y减少行高，反复这个过程。
成果
- 实现了一套挪动端截屏办法。解决了现有第三方库html2canvas绘制清晰度低，圆弧计算精度低，深层DOM解析出错的问题。
- 采纳原子化实现办法。反对截屏自定义绘制，而不是如html2canvas和svg只能通过复数次绘制不同DOM节点，来拼凑指标的形式。
总结
在互联网时代，尤其是5G马上要降临的明天。传统的分享模式，题目+单图片，逐步难以满足越来越丰盛的流动宣传要求。而流量的便宜化和短视频炽热的时下，富图文流传无疑能传递更多的信息。目前咱们曾经实现了根本DOM节点绘制计划，并在站内流动中应用富图文分享。置信在不久的未来，咱们可能利用挪动端截屏分享性能帮忙更多闲鱼用户高效率分享内容，让用户乐在闲鱼，玩在闲鱼。