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