html2canvas常见踩坑问题

一、html2canvas图片留白

图片留白的问题应该是页面有滚动条,所以导致截屏又留白,解决方式有两种:
  1.     将页面window.scrollTo(0,0)这样可以解决,但是有的时候滚动会让用户看到,体验不好,所以,我们可以看下另外一种方式
  2.    设置参数this.$html2canvas(document.getElementById('attack'),{scrollY: 0}) 这样也能解决问题;

二、html2canvas生成图片那一刻,控制台有报错

遇到这样的问题就要检查自己html代码加载图片的那部分,通常是,截屏的时候某个图片加载错误,万能的解决办法是在加载图片的地方加上判断 v-if 这样

三、html2canvas生成图片过大,跳转页面无法传到下个页面

这个问题我曾经找了一个通宵,最后定位到这图片太大太大了,存本地也不行,存数据库更不行,建议大家如果有携带截图到下个页面的操作就通过hash模式改变页面url,或者生成图片的时候尽量少的html结构

以上几点是本人开发过程中遇到的问题,如有问题,请指正,希望多多交流

你可能感兴趣的:(html2canvas常见踩坑问题)