司庆活动总结

主要功能：根据用户所选答案生成对应的图片
选用框架：html2canvas
选用理由：

1. 时间急
2. api简单
3. github上星比较多，那说明使用的人比较多，遇到的问题应该在issue上能找到解决方案😁（后面打脸很舒服☺️）

遇到问题及解决：
阶段1
初始版本的时候，策划测试经过，可是UI文案须要修改

阶段2
更新UI文案以后，测试的安卓机手机都没问题，但发现测试的全部ios生成的图片都空白了。（上面那个按钮不是生成的）
分析问题：看了报错的缘由，定位到对应的源码，发现其中有一张图片的宽高读不出来，直接致使html2canvas报错了。检查了一下css, 我也没用它不支持的css属性啊。去issue看有没有人遇到这个问题，没有😭
问题修复：出现问题以前没改过js代码，只是更换了的图片和css的样式写法。因而我将css样式写法改回上一次的
修复结果：部分ios能够生成图片了。但还有个别版本：ios11.2 ios12仍是一样一片空白。

阶段3
针对ios个别版本进行修复，问题仍然是读不出某张图片的信息
分析问题：获取不到某张图片的宽高，首先我先排除是图片没有load出来的缘由，由于一开始就作了预加载，并且在结果页里图片都已经显现出来了。那会不会是由于雪碧图的缘由呢，由于每次读不出来的那张图片都是雪碧图（它的源码对背景图的解析方式看不懂。。。）
问题修复：我把要生成图片那页的背景图（包括雪碧图）都拆改为img
修复结果：哈，发现成功了！！并且发现把背景图改为img以后，图片马上清晰了好多！可是高兴的太早了...当玩多几回的时候发现，页面好像有点奇怪哦。图一是正确生成的图，图2、三是由问题的。

阶段4
仍是针对ios个别版本，此次问题变成时不时正常、时不时文字错位或消失
分析问题：此次没有任何的报错，就是纯粹的bug！挣扎了半天决定放弃该插件了😭，一直耗着又彻底没头绪解决问题也是浪费时间。
问题修复：因而转用createjs，它就是对canvas进行了一层封装，api还算简单。这里关键点主要有两个：

1. 图片的位置问题。为了兼容各个屏幕大小的手机，css我一直用的是rem，目前来讲效果还算能够，比px少一点坑。全部我决定js这里也是用rem做为单位。ui是以750作为尺寸的，为了方便计算，我就取了7.5这个基数，就是一屏width=7.5rem。那js计算每1rem就等于：var rem = (widthOfWinow / 7.5)
2. canvas模糊的问题。这跟手机像素比有关，它就是canvas的实际大小和渲染大小比。因此首先须要计算出像素比，将canvas.width和canvas.height放大到canvas.style.width/height的像素比倍数。固然，canvas里其余元素的位置也要放大到相应的倍数。

最后
终于测试经过。