$ui/components/my-capture

capture 截取屏幕元素组件

Source:

Members

(inner) props

Source:
Properties:
Name Type Attributes Default Description
dom HTMLElement <optional>
 d.body

需要截取的Dom节点， 默认为document.body
beforeCapture function <optional>

截图前与执行函数，返回 Promise对象
options Object <optional>

html2canvas的配置项

Properties
Name Type Attributes Default Description
async Boolean <optional>
 true

解析 html节点 并 渲染在canvas 这个过程 同步进行
allowTaint Boolean <optional>
 true

允许跨域的图片显示在canvas中（原h2c组件默认是false，封装时定义为ture）
useCORS Boolean <optional>
 true

是否允许开启跨域，原h2c默认为false， 封装时定义为true
backgroundColor String <optional>
 #fffff

canvas的背景颜色默认为白
imageTimeout Number <optional>

图片加载的等待时间， 默认是 15s
ignoreElement function <optional>

(element) => false
logging Boolean <optional>
 false

是否在console中打印转化过程，h2c中默认打印，封装转为默认不打印
removeContainer Boolean <optional>
 true

是否清除h2c组件调用时生成的临时dom节点，默认true
scale Number <optional>
 window.DPR

图片的比例 默认为浏览器的dpr比
width Number <optional>
 element.width

截取dom的width
height Number <optional>
 element.height

截取dom的height
x Number <optional>
 ele.x-offset

canvas 的 原点 处于 dom原点的 水平距离（x距离），并在此位置开始渲染（原点为左上角）
y Number <optional>
 ele.y-offset

canvas 的 原点 处于 dom原点的 垂直距离（y距离），并在此位置开始渲染（原点为左上角）
windowWidth Number <optional>
 w.innerWidth

在渲染dom时的实时window.innerWidth, 可以手动修改 (修改此参数会让dom内一些根据windows大小而改变布局/大小的节点以此值来改变原来的位置和大小（例如某些并列的元素会被换行）)
windowHeight Number <optional>
 w.innerHeight

在渲染dom时的实时window.innerHeight, 可以手动修改
scrollX Number <optional>
 element.scrollX

参数属性

(inner) slot

Source:
Properties:
Name Type Attributes Description
button string <optional>

放置button 按钮的 slot

插槽

Methods

(inner) _renderImg(h2c)

Source:

内部渲染函数

Parameters:
Name Type Description
h2c function

html2canvas的功能函数

Events

on-capture

Source:

点击抓取时派发的事件

Parameters:
Name Type Attributes Description
dom HTMLElement <optional>

抓取的dom节点

on-output

Source:

图片下载时派发的事件

Parameters:
Name Type Description
imgData string

生成图片的Base64字符串