大天使之剑h5攻略心得
背景
在数字传播领域，分享活动是一个至关重要的环节，它能够吸引用户的注意力并推动内容的传播。当前，大多数分享手段依赖标题与单张图片的结合，通过点击跳转至目标页面来实现分享。在信息日益丰富的今天，单一的标题和图片已经难以充分吸引用户。特别是在高要求的营销场景和内容裂变过程中，我们需要一种更有效的方式来呈现和分享页面内容。
当前使用手机原生截屏功能存在多个问题，如内容格式无法自定义、翻页情况无法处理以及视窗区域不可控等。为了解决这些问题，我们探讨了多种解决方案，并对比了内部截屏方案与外部技术实现方案。
现有方案一：Html2Canvas
简介
Html2canvas是一种基于canvas的技术，能够将DOM结构转化为图片。这种技术上手简单，使用方便，能够将对应的DOM结构绘制成图片并保存。
工作原理
它的核心逻辑是克隆对应的节点DOM结构，利用解析成数据，构建canvas进行内容绘制，最终返回对应的canvas。实际使用中我们发现该技术存在一些问题。
问题及挑战
图片跨域不支持：生成的图片存在跨域限制。
绘制清晰度低：即使使用API放大绘制，也会因为生成base64格式图片内容过长导致无法传输。
深度节点出现黑况：由于DOM结构过深，经过像素计算后，会偶尔出现像素丢失情况。
现有方案二：SVG
简介
SVG方案利用了SVG能够包裹DOM结构的特性，将对应目标装载进SVG，之后将SVG导出为base64格式的图片。这种方式容易上手且不依赖第三方库。
问题及限制
不支持JS执行：现今的SPA页面需要执行JS后才会渲染对应的DOM节点，但SVG不支持JS的执行。
SVG的位置和大小不确定：在需要实时展示的情况下，计算位置变得复杂。
解决方案及思路
解决图片跨域问题
我们将通过特定技术手段在生成图片的阶段使用canvas进行绘制。虽然会产生跨域限制，但我们将通过设置相关参数来解决这个问题。
提高清晰度的方法
我们发现在使用宽度为375px的canvas导出图片时会出现模糊情况。为了提高清晰度，我们不选择简单提高原图清晰度（这会大大增加加载时间），而是选择在canvas中放大图片。我们将利用相关参数控制图片坐标和canvas中的绘制坐标，以达到在特定位置绘制清晰内容的目的。
圆弧精度及深层DOM解析问题
针对圆弧精度低和深层DOM解析出错的问题，我们决定采用针对性绘制方案。这种方法好处多多：首先是方法原子化便于维护；其次是绘制高度自定义化，可自由界面结构；最后是拓展性强。在实现过程中，我们会重点解决圆角矩形绘制和文本自动换行两个难点。
圆角矩形和文本自动换行的实现
圆角矩形的实现是通过在canvas上获取图片内容，再利用Path的方式绘制对应的路线，先绘制圆弧部分再绘制直线部分来截取所需内容。而文本自动换行则是通过计算当前文本宽度与行宽进行比较来实现。
