html2canvas生成海报遇到的问题汇总

在使用html2canvas生成海报的开发过程中, 遇到了一些问题, 有一些问题网上已经有回答, 在此汇总一下我遇到的another问题

1. CORS跨域, 导致页面空白的问题。 前端已经添加了{useCORS: true}参数, 从服务器请求来的图片在img标签中正常显示, 但是在生成的canvas中是空白的, 报错提示如下图, 让后端做了nginx配置后解决的

   
   image.png

2. 生成的canvas截图截一半的问题。在我们的开发业务中, 上传图片的宽高比例不限制, 所以会遇到图片很长的情况, 生成海报时需要展示完整图片(后来需求改了, 改成了海报中图片的最大宽高比例为4:3和3:4), 如果用户滚动到图片最底部后, 再点击生成海报, 就会遇到海报中截图截一半的情况, 解决方法如下:
   ① 点击生成海报按钮时, 使用sessionStorage保存当前滚动到的页面高度位置

sessionStorage.setItem("curH", document.scrollingElement.scrollTop);

② 显示生成海报弹框, 使用window.scrollTo(0, 0)滚动到顶部, 开始生成canvas海报

 window.scrollTo(0, 0);

③ 海报生成后, 关闭海报弹框, 将页面回滚到第一步保存的页面高度位置

window.scrollTo(0, sessionStorage.getItem("curH"));

3. 过长/过宽的图片, 生成的海报中图片挤压在一起的问题, 实际业务只需要展示图片中间部分。因为上传的图片宽高比例不限制, 所以会遇到图片很宽或者图片很长的问题, 为了海报显示效果, 规定生成的海报图片中最大宽高比例为:
   ①宽 > 高时, 宽高比为4 : 3
   ②宽 < 高时, 宽高比为3 : 4
   ③宽 = 高时, 宽高比为1 : 1
   起初我在页面中用的img标签显示图片, 设置
   object-fit: cover;
   object-position: center;
   让图片居中展示, 但是用canvas生成海报后, 它会获取图片路径, 完整显示图片, 导致海报中的图片没有平铺, 而是压缩在一起, 如下图,

   
   image.png

之后修改成了用backgroundImage属性设置为背景图展示的方式解决了, 如下代码

// html部分
<div class="cutImg" :class="imgStatus"></div>

// js设置背景图和样式部分
let cutImg = document.querySelector(".cutImg").style;
cutImg.backgroundImage = `url(${this.postObj.worksUrl})`;
let w = this.postObj.worksWidth, h = this.postObj.worksLength;
if (w == h) {
  this.imgStatus = "cutImg1";
}
// 宽 > 高
else if (w > h) {
  this.imgStatus = "cutImg2";
}
// 宽 < 高
else if (w < h) {
  this.imgStatus = "cutImg3";
}

// css部分
.cutImg {
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/*宽 = 高*/
.cutImg1 {
  width: 630px;
  height: 630px;
}
/*宽 > 高*/
.cutImg2 {
  width: 630px;
  height: 472px;
}
/*宽 < 高*/
.cutImg3 {
  width: 630px;
  height: 840px;
}

image.png