0%

html2canvas绘图相关事项

发表于 分类于

实现思路

  • 将需要绘制的海报封装于一个组件内，一般按照宽度750进行绘制。
  • 将海报组件直接放到海报展示页面 最顶部 且 在屏幕可见范围内。
  • 用 absolute 和 z-index 隐藏海报组件。

示例代码

1
<div class="index"> <!-- 海报待展示页面 --> 
2
  <div class="share-result-card"></div> <!-- 海报组件 -->
3
</div>
1
.share-result-card {
2
  position: absolute;
3
  top: 0;
4
  left: 0;
5
  width: 750px;
6
  height: 1334px;
7
  z-index: -2;
8
}

注意事项

  1. 海报内涉及到的所有图片资源，都要使用<img>标签，不可以使用css背景图片，否则会导致图片不清晰问题。
  2. 推荐配置说明：
    1
    const options = {
    2
      x: 0,                      // 水平偏移量，推荐设置为0
    3
      y: 0,                      // 垂直偏移量，推荐设置为0
    4
      backgroundColor: null,     // canvas 背景色，按需设置
    5
      scale: 3,                  // 比例换算，按需设置
    6
    };
  3. 图片链接跨域问题，所有海报上的图片链接，都应该以当前项目的域名一致，否则会导致绘图失败。
  4. 图片格式尽可能为png或者jpeg格式，尽量避免使用svg格式的图片。

相关资料

html2canvas相关配置文档