html2canvas 截图不全生成图片有白边

大概下载了几百张图片蹚出的坑。。。

1. html2canvas生成图片有白边

沙盒环境下面有白边

image.png

开发机环境上面有白边

image.png

本地没问题，以为是自己写的样式问题导致html2canvas生成图片随机
查找方向：一个一个dom节点删除删光了发现还有一条白边

image.png

崩溃了开始找自己的节点外面的dom
居然在header上面发现了个div！！！差点当初气死立刻搜索代码去查这是谁写的

image.png

emmm没搜到....
我师傅说是不是浏览器插件你都关掉试试
我一点进开发者工具就看到了这个罪魁祸首！

image.png

我次喔劳资安装你干嘛了翻译没用到开发用到了

2.html2canvas滚动图片不全

image.png

获取截图元素前把页面滚动到初始位置

window.scrollTo(0, 0);

3.html2canvas css样式限制行数无效

表格里限制行数，第一反应肯定css样式，结果发现canvas里没有画出内容

overfliw: hidden;
text-overflow: ellipsis;
display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;

image.png

于是只能在js上做文章，算出3行字数超出截取文字，并加...
但是中英文混合情况下就要把中文换成2个字节，在计算

    /**
     * table列三行截断
     * @param {string} t 截取的字符串
     * @param {number} e 截取的长度
     */
    getTextLength(t, e) {
        var t = t.substr(0, e).replace(/([^\x00-\xff])/g, "$1 ");
        var res = t.substr(0, e).replace(/[^\x00-\xff]$/, "").replace(/([^\x00-\xff]) /g, "$1");
        return res + (t.length > e ? '...' : '');
    }

效果

image.png

4.html2canvas 下载图片是.txt格式

因为canvas太大了，调整下width 和 height，居然没深究

image.png

最后编辑于：2021.03.29 19:22:24

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

html2canvas 截图不全生成图片有白边