前端根据学生名单拼接榜单图片，背景图片是后端接口动态获取的，而学生名单数量是不定的，在不改变图片宽度的情况下，图片高度是要随着学生数量动态变化的，并且图片不能拉伸变形

图片拼接方案设计如下图

首先，顶图和底图是后端配置，前端接口获取后通过<img />布局

中间绿色部分是学生榜单名单，动态渲染列表，中间也有背景，则是通过css的background：url() repeat 这个属性，1像素背景图片repeat布满中间content，下面贴个最后生成的样例图片吧

2 遇到问题

如何将页面不可见元素转为图片

html2canvas只能将页面上渲染的html元素转为图片，而产品期望不用预览就直接下载图片

• 解决思路：将图片向上拉到-19999px，从而图片不在可视区域，达到隐藏元素的目的

// 榜单
.poster-download-unsee {
  margin-top: -999999999px; // 页面内元素不可见
  position: fixed; // 脱离文档流
}

当在窄屏浏览器下出现滚动条时，html转成的图片出现白屏，或者白边

解决：通过查阅得知，白边主要是因为滚动条出现的缘故，解决思路：用html2canvas转图片之前，先记录当前scrollLeft距离，然后滚动至距离浏览器最左上侧（0，0）处，待图片转成功后，回到之前的（scrollLeft，0）处

// 转base64 上传七牛云
    const imgWrap = document.getElementById(id);
    const { scrollLeft } = document.documentElement;
    // 先水平滚动至页面最左处
    window.scroll(0, 0);
    const canvas = await html2canvas(imgWrap, {
      useCORS: true,
      backgroundColor: null,
      // logging: isDevMode(),
      allowTaint: false });
    // 水平滚动至原处
    window.scroll(scrollLeft, 0);

背景图片1px报错，canvas高度变成0

最后通过定位到源码问题点，1px高的图片通过canvas的屏幕像素比除以2，莫名奇妙的就变成0了

解决思路：让UI重新切4px的背景图片，这样canvas的height就不会变为哦0了