Document

# 前言 ![hivey-whf45.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bf21c185b8642a8b139199eaa3bea54~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=822&h=644&s=18036059&e=gif&f=236&b=1c191f) **👉👉👉👉[在线demo](https://weijun-lab.github.io/region-screenshot-js/)👈👈👈👈** 已更新至1.1.0版本，增加了初始化选区功能。本文介绍如何通过插件[region-screenshot-js](https://github.com/weijun-lab/region-screenshot-js)来简洁高效的在web端实现选区截图功能，并在截图上绘制出特定图案和马赛克，如果插件自带图案绘制不能满足你的需求，你可以通过插件的`customDrawing`配置项来`自定义绘制`。以下仅做基础示意，更多功能和用法请参见[文档](https://github.com/weijun-lab/region-screenshot-js)。如果有帮助到你，请[点个star](https://github.com/weijun-lab/region-screenshot-js)。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8764e31af87349dc82b443a6556eadd3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=675&h=584&s=759159&e=png&b=342f39) # 1.引入插件并创窗出建截图工具 —— region-screenshot-js支持在多个环境下使用，本文通过原生html来演示： ```html Document ``` 此时查看页面，截图工具已被创建并可以正常使用。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f448178b5da4ab7a8f8d4e9dc141c7b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=772&h=670&s=1269543&e=png&b=352f39) **bg.png** ![bg.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/318f67ce2b384ce3bd7a393cbdd6af39~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3840&h=2160&s=3589650&e=jpg&b=233a08) # 2.进行一些自定义配置下面演示对截图工具的`全局颜色选项`和`选区轮廓颜色`进行配置，`region-screenshot-js`支持十余个自定义配置，更多配置项请参见文档。 ```html let screenshot = new RegionScreenshot({ globalColorOptions:["red","pink","skyblue"],//配置全局颜色选项 regionColor:"#00ff28"//定义选区轮廓颜色 }); ```` 再次查看页面，两个配置已生效 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4aed1d67343420c844d638caa3f584d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=615&h=582&s=866343&e=png&b=302b34) # 3.监听事件在插件使用过程中，可能需要监听用户操作来做一些额外的事情，下面演示`regionDragging`和`screenshotGenerated`事件。更多监听器请参见文档。 ```html let screenshot = new RegionScreenshot({ globalColorOptions:["red","pink","skyblue"],//配置全局颜色选项 regionColor:"#00ff28"//定义选区轮廓颜色 }); screenshot.on("screenshotGenerated",(dataUrl)=>{ console.log(dataUrl)//截图完成时触发，可在回调中接收到截图的base64编码 }); screenshot.on("regionDragging",(region)=>{ console.log(region)//选区被拖动时触发，可在回调中接收到选区的位置信息 }) ``` # 4.初始化时自动选取指定区域某些场景下，需要初始化时自动选取区域，使用`initialRegion`配置项便可轻松完成，如下代码所示： ```js let screenshot = new RegionScreenshot({ initialRegion: { top: 200, left: 500, width: 600, height: 450 } }); ``` 无需用户操作，自动创建出了区域： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0b2c03ad7b74a309d0c059338eef67a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=656&h=574&s=967701&e=png&b=3a333e) # 5.开发自己的绘制工具如果插件目前自带的绘制工具不能满足你的需求，你可以通过`customDrawing`配置项来自定义一个绘制工具，下面演示在插件中添加一个绘制表情包的例子。 `customDrawing`是一个包含`customDrawingObject`对象的数组，`customDrawingObject`对象的配置项如下所示： | 配置项 | 类型 | 描述 | | --- | --- | --- | | **className** | String | 自定义绘制项的类名 | | **optionsHtml** | String | 定义自定义绘制项二级菜单的html内容 | | **onOptionsCreated** | Function | 当自定义绘制项的二级菜单创建完成该函数将被调用，可在参数中获取到`二级菜单dom对象` | | **onDrawingOpen** | Function | 当自定义绘制项被激活时该函数将被调用，可在参数中获取到`二级菜单dom对象`、`canvas dom对象`、`保存历史记录函数`，注意：请在每次自定义绘制结束后调用`保存历史记录函数`，以确保插件的撤销功能正常 | | **onDrawingClose** | Function | 当自定义绘制项被关闭时该函数将被调用，可在参数中获取到`二级菜单dom对象`、`canvas dom对象`、`保存历史记录函数` | 示例代码： ```html Document ``` 这样你就得到了一个绘制表情包的功能（酷不酷）： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03c5da8108774326af9b5114e9cfb9f2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=668&h=671&s=1090985&e=png&b=342e38) emoji_active.png ![emoji.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bd15ff1de8f4065927f90dd49e01ba9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=32&h=32&s=604&e=png&a=1&b=f8a807) emoji.png ![emoji_active.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03f386e64c48460fabb67ac57b571021~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=32&h=32&s=617&e=png&a=1&b=efb136) emoji-1.png ![emoji-1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c316f64c4cdd4acb9fc228598c162893~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=32&h=32&s=1588&e=png&a=1&b=fdc019) emoji-2.png ![emoji-2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/656920f3110740d9bbc20c96377c0c70~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=32&h=32&s=1463&e=png&a=1&b=fc7a59) emoji-3.png ![emoji-3.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86897fee19184bfbaf663b15d1b905cd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=32&h=32&s=1376&e=png&a=1&b=fed60f) emoji-4.png ![emoji-4.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b498cc4e6e74e2ab48313a1c08f1ad6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=32&h=32&s=1490&e=png&a=1&b=fed610) # 它如何工作 region-screenshot-js的核心原理是使用`WebRTC`（Web Real-Time Communication）技术，读取浏览器标签页信息。因此region-screenshot-js只允许在本地环境或者HTTPS环境中运行。你也可以通过如下设置使浏览器在在非HTTPS环境中运行region-screenshot-js，假设使用Chrome浏览器： **(请谨慎使用，这可能引入安全隐患）**： 1. 进入chrome://flags/#unsafely-treat-insecure-origin-as-secure 2. 在Insecure origins treated as secure文本框中输入你的网站地址，例如：https://www.example.com 3. 勾选右侧Enable # 总结本文使用插件[region-screenshot-js](https://github.com/weijun-lab/region-screenshot-js)快速实现了一个web端选区截图功能，并利用插件向外抛出的接口开发了自己的绘制功能，更多配置项或其他相关功能。具体请参阅[插件文档](https://github.com/weijun-lab/region-screenshot-js)。对于该插件的有任何建议或意见，可以在[Issues](https://github.com/weijun-lab/region-screenshot-js/issues)里提出。如果有帮助到你，请[点个star](https://github.com/weijun-lab/region-screenshot-js)。