vue-shot-image

vue-shot-image 是一个基于 html2canvas 封装的仿微信截图的 vue2 截图插件，根据当前浏览器页面（如果页面过高，只对可见视口区域）进行截图，生成 base64 字符串图片

属性

属性名	默认值描述
options	shotDom: 截图 dom 元素 ，默认 document.body enableWebRtc: 是否开启 WebRtc 截图，默认 false，即为 canvas 截图 cancelCallback: WebRtc 截图未授权回调，默认空 wrcReplyTime: WebRtc 截图延迟时间，默认500ms
size	尺寸，可选值：medium, small, mini，默认small
showFileList	是否显示截图列表，默认 true
multiple	是否多选，默认 true
limit	多选最多限制，默认 3
disable	是否置灰，默认 false

ps: 可以使用 v-model 关联截图产生的数据进行同步，如果你希望排除某些元素进行截图，可以给元素添加 data-html2canvas-ignore 属性，渲染时会将它们从中自动排除。

插槽

支持自定义插槽

插槽名	作用
shot-button	用于按钮的显示

事件

事件名	说明	参数
shot-start	() => { };
shot-complete	(url) => { };	完成截图的当前URL
shot-change	(arr | url) => { };	多选时为URL数组，单选时为URL
shot-end	() => { };
download-fail	(err) => { };	错误信息
download-success	(name) => { };	下载的文件名

不支持的 CSS 属性

• background-blend-mode
• border-image
• box-decoration-break
• box-shadow
• filter
• font-variant-ligatures
• mix-blend-mode
• object-fit
• repeating-linear-gradient()
• writing-mode
• zoom