微信H5使用html2canvas 截屏不清晰的坑

目前的H5页面多半是使用微信来传播的，很多的H5都会使用到长按截屏的功能，要是截屏的图片上面没有需要动态生成的元素，就可以直接设计做出来，但是一旦涉及到需要使用用户名的图片，就得使用canvas绘制！但是不同的适配，会使得画出来的图片以及上面的元素错位或者不清晰，在这里提供一种解决思路.

将需要生成的页面单独分出来，

不做任何适配，

在截图层使用百分比布局确保里面的元素不会因为设备size而改变位置，截图层使用设计图宽高，依然引入html2canvas.js,

使用html2canvas时，带上它自带的宽高属性，设置为你截图层的宽高

然后就可以完美的解决在适配下，截图不清晰的坑，注意截图层不要使用背景图片，这样会不清晰，使用img标签放入图片，加上定位属性，z-index:999(设置为当前层最高即可，不一定要999)。如果使用rem布局效果更佳！