html2canvas生成图片，由于滚动条造成生成图片出现白色区域

最新推荐文章于 2025-02-18 13:43:17 发布

ys_healone

最新推荐文章于 2025-02-18 13:43:17 发布

阅读量738

点赞数 3

文章标签：前端 javascript bug

本文链接：https://blog.youkuaiyun.com/ys_healone/article/details/140016849

版权

1、问题描述

html2canvas生成图片上方出现一块白色区域，但明确元素不包含该块白色区域

2、问题触发条件

页面存在滚动条，并且滑动了滚动条，页面不在最上方（我的情况是只存在上下的滚动条），此时生成图片，图片上方会出现一块白色区域。如果页面滚动条未移动在初始位置，生成图片是没问题的。

3、解决方式

我是单独写了一个元素节点用来生成图片，不在页面中展示。首先将该元素从绝对定位absolute改为固定定位fixed

.canvas {
    position: fixed;
    top: 0;
    left: -1000px;
    width: 375px;
    z-index: -99;
}

然后调用html2canvas时增加配置项y

canvasToImage: function(obj){
   var _this = this;
   var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//得到滚动条高度
   var domObj = document.querySelector("#canvas")
   html2canvas(domObj, {
      useCORS: true,
      logging: false,
      allowTaint: true,
      taintTest: false,
      backgroundColor: "#ffffff",
      scale: 2, //2倍图 1倍图模糊
      dpi: 300, // 处理模糊问题
      y: scrollTop,//解决有滚动条时，生成海报顶部有空白问题
   }).then( function(canvas){
       // 保存海报
       _this.shareImg = canvas.toDataURL("image/png");
       // TODO 生成图片后续操作
        var param = canvas.toDataURL("image/png");

    }).catch(function(err){
       console.log(err)
    });
}

就解决了这个问题

注：如果你水平方向有滚动条请尝试增加配置参数 x为水平方向当前滚动条宽度，具体问题具体分析，此文章仅供参考！

欢迎有问题一起探讨！