大概下载了几百张图片蹚出的坑。。。
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
