美文网首页
html2canvas 截图不全 生成图片有白边

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

作者: 最x程序猿 | 来源:发表于2021-03-29 15:52 被阅读0次

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

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

相关文章