html2canvas截图不全或空白

Posted 2023-04-27

参考技术A 需求：页面上半部分图片编辑区域 下半部分表单编辑区域   当页面出现滚动对图片编辑区域遮挡或图片编辑区域滚出可视区域范围内后 截图会出现不全或空白的情况

解决方案：

加入属性（设置属性y为需要截取的元素距页面顶端的距离（非距浏览器顶端距离））

只嵌套一层如下

y:  this.$refs.container.offsetTop

嵌套层级较多

const top = _this.$refs.container.getBoundingClientRect().top;

const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

 const y = top + scrollTop;

y:y

以下为文档对y属性的注解

文件查找

对于运维工作来说，需要对大量的文件进行管理，其中，文件查找就非常重要，这里分享Linux中两款文件查找工具：locate、find

一、locate，通过索引查找文件。

优点：速度快。

缺点：当索引数据库不全或错误时，会导致查询不出结果或查询结果错误

命令格式：locate [选项] 查询条件

常用选项：

-b：basename，根据基名查询

-c：count,返回查询结果的条目数量

-r：regex,基本正则表达式，支持用基本正则表达式查询。如果不加这个选项，则仅支持glob查询

-i：ignore-case，忽略大小写

注意：系统默认是不安装locate工具的，需要用的话，可以通过yum install -y mlocate安装，安装完成后，用updatedb生成索引数据库

二、find，通过指定条件查找文件

优点：查询条件可以多样，可以灵活查询需要的文件，系统默认安装。

缺点：因为是直接比对文件属性，所以查询速度较慢

命令格式：find [参数] [查询路径] [查询条件] [动作]

1、参数：

-P：不追踪软链接，默认值

-L：追踪软链接

2、查询路径，不指定查询路径的时候默认是当前工作路径

3、查询条件

3.1 根据文件名查询

-name "glob查询语句"：通过名称查询文件，注意要全文件名匹配

glob查询通配符：

*任意长度的字符串

？单个字符

[]指定范围的任意一个字符

a-c:小写字母a到c

A-C:大写字母A到C

0-9：数字0到9

[:lower:]：任意小写字母

[:upper:]：任意大写字母

[:alpha:]：任意字母，包括大写，小写

[:digit:]：任意数字，0-9

[:alnum:]：任意字母或数字

[:punct:]：任意非字母符号

[:xdigit:]：任意十六进制数字，包含0-9，a-f，A-F

也可以把范围直接相连，表示两个范围内的值都可以取，比如：a-c[:upper:]就表示可以取a到c和大写字母中的任意一个字符。

[^]不属于指定范围的任意一个字符

-iname "glob查询语句"：通过名称查询文件，不区分大小写

-regex "基本正则表达式"：通过正则表达式查询文件，注意是包含完整目录的方式查询，且正则表达式应匹配完整目录，正则表达式的规则见文本查询，点评：不好用，不如把查询结果推给grep来查询

3.2 根据用户查询

-user 用户名：属主为该用户

-group 组名：属组为该用户组

-uid 用户ID:属主ID为指定用户ID

-gid 组ID：属组ID为该用户组ID

-nouser：属主对应的用户不存在

-nogroup:属组对应的用户组不存在

3.3 根据文件大小查询

-size 整数m单位[k,m,g]：文件大小介于：(m-1)单位~m单位

-size +m单位：文件大小大于等于m单位

-size -m单位：文件大小小于等于m单位

3.4 根据时间戳

3.4.1 按日期

-atime m:m天之内（含m天）访问过

-mtime m：m天之内（含m天）修改过

-ctime m：m天之内（含m天）创建的

3.4.2 按分钟

-amin m：m分钟之内（含m分钟）访问过

-mmin m：m分钟之内（含m分钟）修改过

-cmin m：m分钟之内（含m分钟）创建的

3.5 根据权限表

-perm MODE：权限表一致。MODE为3位8进制数字，分别代表属主、属组、其他人的权限

-perm -MODE: 权限表中属主、属组、其他人的权限都满足，注意，计算时先将MODE转换为2进制，比对的时候只比对1的部分，0的部分不比对。

-perm /MODE:权限表中属主、属组、其他人的权限，任意一个满足。计算时先将MODE转换为2进制，比对的时候只比对1的部分，0的部分不比对。

3.6 根据文件类型

-type FileType:

3.7 查询条件联合运算

-a :与

-o :或

-not ：否

！:否

\\( \\):组合

4、动作

-ls：列出查询结果的详细信息，类似ls -l的结果

-print：列出查询结果，也是find的默认动作

-delete：删除查询到的文件

-ok COMMAND {} \\; :交互式执行COMMAND，{}代表查询到的每一条结果。

-exec COMMAND {} \\; ：非交互式执行COMMAND。

-fls FILE：将查询结果的详细信息写入FILE中