美文网首页前端开发那些事儿
html2canvas 截取 html 生成图片空白问题

html2canvas 截取 html 生成图片空白问题

作者: Aries蓝 | 来源:发表于2020-08-27 16:16 被阅读0次
  1. 当要截取内容有向上 滚动的 内容的时候, 滚动被覆盖的内容不会被绘制成图片
    解决问题: 我选择内容弄成 两份.wrap, .fiexd, .fiexd用固定定位 positon:fixed ;并且 z-index:-1 来隐藏,默认隐藏,在绘制的时候 的时候时候显示,绘制完成 继续隐藏.
    还有一个问题就是 如果 用fiexd 那么 文档的高度必须 被撑开 和 固定定位的高度要高,不然超过的高度 内容就是 空白.... 可以想办法把 视口高度撑开.
  <div class="wrap">
 </div>
  <div class="fiexd" v-show="isGetBase64" ref="upLoadImg">
 </div>

 .fiexd {
    top: 0;
    position: fixed;
    z-index: -1;
    background: #fff;
    padding: 36px;
}

2 .iOS 原生从相册选择的图片渲染空白的问题

截取的图片的地址可能被 html2canvas 不识别,然后会返回一个 错误的base64编码地址,把 WeChat92eaeca4cbe1aa60b176c4b6ccb88da0.png

会调用

var o = e("./utils").smallImage;
 f.smallImage = function () {
        return "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
      }

通过这个方法 就把不识别的地址换成了这个固定的 base64 然后绘制的图片就会是空白

相关文章

网友评论

    本文标题:html2canvas 截取 html 生成图片空白问题

    本文链接:https://www.haomeiwen.com/subject/unncsktx.html