{"id":21524002,"url":"https://github.com/likaia/screen-shot","last_synced_at":"2025-04-04T11:15:37.237Z","repository":{"id":53027917,"uuid":"335035999","full_name":"likaia/screen-shot","owner":"likaia","description":"web端自定义截图插件（Vue3版本）","archived":false,"fork":false,"pushed_at":"2023-10-06T14:53:32.000Z","size":2432,"stargazers_count":351,"open_issues_count":9,"forks_count":79,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-02T09:02:20.823Z","etag":null,"topics":["screen-shot","screenshot","typescript","vue3","vue3-screenshot","web-screenshot"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/likaia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-01T17:54:36.000Z","updated_at":"2025-02-25T04:14:40.000Z","dependencies_parsed_at":"2024-06-18T17:11:49.217Z","dependency_job_id":null,"html_url":"https://github.com/likaia/screen-shot","commit_stats":{"total_commits":52,"total_committers":1,"mean_commits":52.0,"dds":0.0,"last_synced_commit":"14d5f2bd5b4c668828e3ed507056801b4e506e74"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likaia%2Fscreen-shot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likaia%2Fscreen-shot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likaia%2Fscreen-shot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likaia%2Fscreen-shot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/likaia","download_url":"https://codeload.github.com/likaia/screen-shot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166169,"owners_count":20894654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["screen-shot","screenshot","typescript","vue3","vue3-screenshot","web-screenshot"],"created_at":"2024-11-24T01:20:16.800Z","updated_at":"2025-04-04T11:15:37.217Z","avatar_url":"https://github.com/likaia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-web-screen-shot · [![npm](https://img.shields.io/badge/npm-v1.5.3-2081C1)](https://www.npmjs.com/package/vue-web-screen-shot) [![yarn](https://img.shields.io/badge/yarn-v1.5.3-F37E42)](https://yarnpkg.com/package/vue-web-screen-shot) [![github](https://img.shields.io/badge/GitHub-depositary-9A9A9A)](https://github.com/likaia/screen-shot) [![](https://img.shields.io/github/issues/likaia/screen-shot)](https://github.com/likaia/screen-shot/issues) [![](\thttps://img.shields.io/github/forks/likaia/screen-shot)](https://github.com/likaia/screen-shot/network/members) [![](\thttps://img.shields.io/github/stars/likaia/screen-shot)](https://github.com/likaia/screen-shot/stargazers)\nweb端自定义截屏插件(Vue3版)，运行视频：[实现web端自定义截屏功能](https://www.bilibili.com/video/BV1Ey4y127cV) , 本插件仅支持Vue3,如需在其他平台使用请移步 ：[js-web-screen-shot](https://www.npmjs.com/package/js-web-screen-shot) 效果图如下：\n![截屏效果图](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/486d810877a24582aa8cf110e643c138~tplv-k3u1fbpfcp-watermark.image)\n\n## 写在前面\n关于此插件的更多介绍以及实现原理请移步：\n- [实现Web端自定义截屏](https://juejin.cn/post/6924368956950052877)\n- [实现Web端自定义截屏(JS版)](https://juejin.cn/post/6931901091445473293)\n\n## 插件安装\n```bash\nyarn add vue-web-screen-shot\n\n# or\n\nnpm install vue-web-screen-shot --save\n```\n\n## 插件使用\n由于插件使用Vue3编写，因此它只能在Vue3项目中运行，如果你需要在vue2项目或者其他js项目中运行请移步：[js-web-screen-shot](https://www.npmjs.com/package/js-web-screen-shot)，它采用原生js编写，功能与本插件功能一致。\n\u003e 注意⚠️： 如果需要使用插件的webrtc模式或者截图写入剪切板功能，需要你的网站运行在`https`环境或者`localhost`环境。\n\n* 在项目的入口文件`main.ts/main.js`中加入下述代码\n```javascript\n// 导入截屏插件\nimport screenShort from \"vue-web-screen-shot\";\nconst app = createApp(App);\n// 使用截屏插件\napp.use(screenShort, { enableWebRtc: false })\n```\n* 在你的需要使用的业务代码中，添加下述代码\n```vue\n\u003ctemplate\u003e\n  \u003c!--截图组件--\u003e\n  \u003cscreen-short v-if=\"screenshotStatus\"\n  @destroy-component=\"destroyComponent\"\n  @get-image-data=\"getImg\"\n  \u003e\u003c/screen-short\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n\nexport default defineComponent({\n  setup(props, context) {\n    const screenshotStatus = ref\u003cboolean\u003e(false);\n    // 销毁组件函数\n    const destroyComponent = function(status: boolean) {\n      screenshotStatus.value = status;\n    }\n    // 获取裁剪区域图片信息\n    const getImg = function(base64: string) {\n      console.log(\"截图组件传递的图片信息\", base64);\n    }\n    \n    return {\n      screenshotStatus,\n      destroyComponent,\n      getImg\n    }\n  }\n})\n\u003c/script\u003e\n```\n### 参数说明\n如示例代码所示，在template中直接使用`screen-short`插件，绑定组件需要的事件处理函数即可。\n\n接下来就跟大家讲下组件中每个属性的意义：\n* screenshotStatus 用于控制组件是否出现在dom中\n* @destroy-component 用于接收截图组件传递的销毁消息，我们需要在对应的函数中销毁截图组件\n* @get-image-data 用于接收截图组件传递的框选区域的base64图片信息，我们需要为他提供一个函数来接收截图组件传递的消息\n* @webrtc-error 使用webrtc模式截图时，当用户的浏览器不支持或者未授权时会触发此回调\n\n#### 可选参数\n截图插件有一个可选参数，它接受一个对象，对象每个key的作用如下: \n* `enableWebRtc` 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图\n* `level` 截图容器层级，值为number类型。\n* `clickCutFullScreen` 单击截全屏启用状态,值为`boolean`类型， 默认为`false`\n* `hiddenToolIco` 需要隐藏的截图工具栏图标，值为`{ save?: boolean; undo?: boolean; confirm?: boolean }`类型，默认为`{}`。传你需要隐藏的图标名称，将值设为`true`即可。\n* `enableCORS` html2canvas截图模式下跨域的启用状态,值为`boolean`类型，默认为`false`\n* `proxyAddress`  html2canvas截图模式下的图片服务器代理地址,值为`string`类型，默认为`undefined`\n* `writeBase64` 是否将截图内容写入剪切板，值为`boolean`类型，默认为`true`\n* `wrcWindowMode` 是否启用窗口截图模式，值为`boolean`类型，默认为`false`，即当前标签页截图。如果标签页截图的内容有滚动条或者底部有空缺，可以考虑启用此模式。\n* `hiddenScrollBar` 是否隐藏滚动条，用webrtc模式截图时chrome 112版本的浏览器在部分系统下会挤压出现滚动条，如果出现你可以尝试通过此参数来进行修复。值为`Object`类型，有4个属性：\n  * `state: boolean`; 启用状态, 默认为`false`\n  * `fillState?: boolean`; 填充状态，默认为`false`\n  * `color?: string`; 填充层颜色，滚动条隐藏后可能会出现空缺，需要进行填充，默认填充色为黑色。\n  * `fillWidth?: number`; 填充层宽度，默认为截图容器的宽度\n  * `fillHeight?: number`; 填充层高度，默认为空缺区域的高度\n\n\u003e 使用当前标签页进行截图相对而言用户体验是最好的，但是因为`chrome 112`版本的bug会造成页面内容挤压导致截取到的内容不完整，因此只能采用其他方案来解决此问题了。`wrcWindowMode`和`hiddenScrollBar`都可以解决这个问题。\n\u003e * `wrcWindowMode`方案会更完美些，但是用户授权时会出现其他的应用程序选项，用户体验会差一些\n\u003e * `hiddenScrollBar`方案还是采用标签页截图，但是会造成内容挤压，底部出现空白。\n\u003e\n\u003e 两种方案的优点与缺点都讲完了，最好的办法还是希望`chrome`能在之后的版本更新中修复此问题。\n\n\n## 写在最后\n至此，插件的所有使用方法就介绍完了。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikaia%2Fscreen-shot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flikaia%2Fscreen-shot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikaia%2Fscreen-shot/lists"}