司庆活动总结

主要功能：根据用户所选答案生成对应的图片
选用框架：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之后，图片立刻清晰了好多！但是高兴的太早了...当玩多几次的时候发现，页面好像有点奇怪哦。图一是正确生成的图，图二、三是由问题的。

阶段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里其他元素的位置也要放大到相应的倍数。

最后
终于测试通过。

转载于:https://www.cnblogs.com/MJyaaatou/p/10050502.html