下载对比图的功能里，由于需要快速迭代，项目中使用了html2canvas这个插件，出现了元素文字位置不统一、图片错位、图片加载不出来的问题。通过查阅canvas绘制的策略：使用同源策略模式。
1、图片加载不出：
- 场景：当打开ch
- rome开发者工具时，图片正常显示。关闭后，图片加载失败，打开控制台，提示
线上下载的图
线下下载的图
跨域报错，并且提示报错发生在html2canvas的源码当中。所以是图片跨域引起当html2canvas绘制图片失败
-
解决：由于代码中html2canvas提供了跨域配置userCORS:true，但是这个操作并没有成功，
-
1、通过进一步的阅读源码发现，html2canvas在html转为canvas前会复制原有的dom，然后在渲染。在浏览器渲染时，img不存在跨域，但当在插件中时由于使用了iframe就会触发同源策略，这时html2canvas中img图片get网络图片渲染时图片就跨域了，所以走不到配置项这里就会报错，从而导致加载图片失败。
-
2、基于这一条件下，了解到img标签具有crossorigin属性，加上crossorigin=“anonymous”之后，因为这个属性需要后端也设置允许跨域。所以在后端服务已经设置允许跨域的情况下，我以为已经生效。一到线上看，还是偶尔图片(某些图片)加载失败，这时通过查阅资料，发现图片这一静态文件有时会通过cdn下载，所以就相当于使用了缓存。所以只要使用缓存(和之前时刻同一图片)就会加载失败。
-
所以给img的路径加上时间戳就完美的解决了这个问题！
-
2、元素文字位置不统一：
-
场景：
当取名为lisa时，由图可看出同一高度的图片和男同学高度不同(lisa的脚超过了底线)。通过查阅资料得知绘制canvas时解析中文和英文的基线不同，后通过设置line-hight解决这个问题
3、图片错位：
-
场景：在通过html2canvas绘制出来的图片在本地正常，在线上下载后的图片人物会往下移2n
图片:
线上下载的图
线下下载的图
-
问题分析：通过查看源码，了解到插件仅仅是把dom复制了一边，然后创建了一个canvas并按照dom进行解析，初以为是网上的案例，因为滚动条的原因导致图片错位(网上的案例是边缘出现错位或不全，通过配置scrollX/scrollY解决)。但是配置后依然不起效
- 随后查看官方文档发现在更新features，居然是关于css属性支持的，所以随后去查看里面的docs文件夹下的文件
发现faq.md里的一条，大概说的就是：CSS属性在插件中没有全部支持完全，部分不能编译
这时我就去看另外一个features.md文件里搜索项目使用的CSS属性 有没有不在插件中支持的！！最后果然发现transition和cursor这两个属性是不支持的，随后删除掉项目中的这两个不支持的属性，随后部署上线， oh~ work！ 成功的解决了困扰了我两天的一个bug
