记录我的Html2Canvas填坑之旅

1、需求背景

      公司要出一公众号产品，在其中两个页面需要有分享海报的功能，将对应的页面生成可分享带二维码的清晰度较高的图片。于是我开始了我的html2canvas插件的填坑之旅。

2、坑之跨域图片（图片空白）

     html2canvas要解决图片跨域网上有很多文章。因为我的项目中有微信头像，我并没有采用反向代理（小声哔哔因为我还不会），所以选择了将图片转为base64，这里也为我后面解决一个大坑埋下了彩蛋。

3、坑之清晰度模糊

     这个问题好像使用最新版的插件（1.0.0-rc3）清晰度还是可以看的。但是我之前使用的是0.5.0-alpha1，所以就要解决这个问题。网上也是很多文章，大概意思就是缩放！

在处理清晰度的时候我遇到个问题就是生成的图片一片白。并非图片跨域问题还出现一片白，后来发现要去计算需要绘制元素的大小及其相对于视口的位置然后移动到合适的位置。这个时候就可以看到已经正常了而且清晰度还是不错的。

写到这儿我以为这个功能就算结束了

然而测试告诉我ios一片空白，我的头脑也空白了。

由于公司没有测试机，我用的也是windows，真机调试基本就用不上了（微信开发者工具老版本的真机调试设置网络代理后我上不了网打不开页面。）

于是就盲猜问题可能原因，首先说我的海报页面与展示给用户的页面ui设计是不一样的。这个时候我是写了个单独的div然后display:none。点击生成海报按钮在display：block（html2canvas不会去捕获设置了display：none）的元素。于是我的导师就说是不是因为页面没有加载完的原因，如果让测试进入页面等待几分钟，是的！可以正常生成了。于是我把海报的div直接隐藏在了页面下面。ios正常了~

4、圆角样式不支持，多行省略不支持

我真的是头大， 1.0.0-rc3不支持我的多行省略相关的css，0.5.0-alpha1不支持我的圆角样式。产品又非要头像是个圆的。现在解决是解决了但是效果不是特别好。我就不说了。

5、大坑来了

?ios怎么回事，怎么直接被截断了的感觉（头像就是这样然后把img宽高放大撑开就是个伪圆）。测试图片如果是小图就正常

查看插件git的issue有人说是base64限制了长度，后来排查并不是。查看network-img发现生成海报时后把页面所有的图片资源再次加载，大图可能没加载完，但是查看源码发现又是做了complete判断的。今天我突然发现，我的转了base64的头像并不会重复加载，于是我就将长图转了base64.上传代码！找测试！成功！呼~折腾了我大半月的bug终于解决了。

感觉我写的语无伦次。。。就这样吧。记录一下html2canvas使用经历。下次使用应该会好很多了！