前端宽度一至显示宽度不一致_html2canvas在不同设备生成图片大小不一致问题

场景描述：

使用html2canvas将移动端的一整个页面或者页面中的部分内容生成图片。

当要生成的内容宽高不固定时，比如：全屏显示的页面，那么，在不同分辨率设备上，就会生成出不同大小的图片，虽然生成的图片与设备显示的样式几乎一样，但是，不同的设备生成的图片就还有不小的差异，有的需求是想要生成大小一样的图片，无论在IOS或者安卓设备上，比如你生成的这张图片是一张宣传海报，那么固定尺寸的图片会有更好的效果。

原因分析：

html2canvas在生成图片时，是根据页面内元素大小来确定大小的，因此，当你想要生成图片的元素结点是全屏的，那么最后就是一个全屏大小的图片，如果是固定宽高的，那么生成的就是固定宽高的。

这里以生成全屏海报为例，以750 * 1334为标准：

如果你的手机是iphoneX或者全面屏高分辨率的安卓机型，生成的图片就会很长，那么我想生成固定大小的图片该怎么办？

上面已经说过，你给生成元素固定宽高，生成的图片就是固定大小的，为了方便适配，可以采用两层元素方案。

何为两层元素方案？

就是页面上显示一层，下面覆盖一层要生成的固定宽高的元素内容，因为显示的上层覆盖了下层，所以不用担心会影响页面显示，也不用担心下层元素(即真正要生成图片的元素内容)会生成空白图片，层级及样式问题可以使用position调整。

顺利生成图片并保存后，我们发现图片内容样式和元素排版是一样，也就是解决了长短大小不一的问题，细心的朋友会发现，虽然图片看上去一样，但是IOS和安卓生成的图片尺寸大小是不相同的，这又是什么原因？

因为设备图片dpi不同造成的，你要生成的元素大小固定了375px * 667px，IOS上可能会生成750 * 1334大小的图片，安卓上可能是生成1080 * 1920大小的图片，甚至1012 * 1800等大小的图片，有心的朋友一计算宽高比就会发现一个约等于0.562的比例系数，当然，你要是设置300px * 600px，这个系数就会变成0.5。

其实到这里，已经解决了我们的问题，我们生成的图片，无论在安卓还是IOS上，看上去都是一样的，只是实际尺寸稍有差异，难道你分享个图片还要去看图片宽高大小吗？

真有较真的网友，就要生成大小尺寸一样的图片，就要一模一样，就要完美无瑕，请移步搜索web中修改图片dpi方案。

欢迎关注博主：小圣贤君，有问题可以留言哦~