前言
👉👉👉👉在线demo👈👈👈👈
本文介绍如何通过插件region-screenshot-js来简洁高效的在web端实现选区截图功能，并在截图上绘制出特定图案和马赛克，如果插件自带图案绘制不能满足你的需求，你可以通过插件的customDrawing配置项来自定义绘制。以下仅做基础示意，更多功能和用法请参见文档。这是我在工作之余开发的插件，近两千行代码，写了小两月。对于该插件的有任何建议或意见，可以在Issues里提出。如果有帮助到你，请点个star。
1.引入插件并创窗出建截图工具
—— region-screenshot-js支持在多个环境下使用，本文通过原生html来演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, html { height: 100%; width: 100%; } * { margin: 0; padding: 0; } body { background-image: url(./assets/bg.png); background-size: cover; background-position: center; } </style> </head> <body> </body> <script src="./dist/region-screenshot.umd.js"></script> <script> let screenshot = new RegionScreenshot();//执行实例化便会自动创建窗户截图工具 </script> </html>
此时查看页面，截图工具已被创建并可以正常使用。
bg.png
2.进行一些自定义配置
下面演示对截图工具的全局颜色选项和选区轮廓颜色进行配置，region-screenshot-js支持十余个自定义配置，更多配置项请参见文档。
let screenshot = new RegionScreenshot({ globalColorOptions:["red","pink","skyblue"],//配置全局颜色选项 regionColor:"#00ff28"//定义选区轮廓颜色 });
再次查看页面，两个配置已生效
3.监听事件
在插件使用过程中，可能需要监听用户操作来做一些额外的事情，下面演示regionDragging和screenshotGenerated事件。更多监听器请参见文档。
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.开发自己的绘制工具
如果插件目前自带的绘制工具不能满足你的需求，你可以通过customDrawing配置项来自定义一个绘制工具，下面演示在插件中添加一个绘制表情包的例子。
customDrawing是一个包含customDrawingObject对象的数组，customDrawingObject对象的配置项如下所示：
| 配置项 | 类型 | 描述 |
|---|---|---|
| className | String | 自定义绘制项的类名 |
| optionsHtml | String | 定义自定义绘制项二级菜单的html内容 |
| onOptionsCreated | Function | 当自定义绘制项的二级菜单创建完成该函数将被调用，可在参数中获取到二级菜单dom对象 |
| onDrawingOpen | Function | 当自定义绘制项被激活时该函数将被调用，可在参数中获取到二级菜单dom对象、canvas dom对象、保存历史记录函数，注意：请在每次自定义绘制结束后调用保存历史记录函数，以确保插件的撤销功能正常 |
| onDrawingClose | Function | 当自定义绘制项被关闭时该函数将被调用，可在参数中获取到二级菜单dom对象、canvas dom对象、保存历史记录函数 |
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, html { height: 100%; width: 100%; } * { margin: 0; padding: 0; } body { background-image: url(./assets/bg.png); background-size: cover; background-position: center; } .region-screenshot_custom_tools.emoji .region-screenshot_tools_btn { background-image: url(./assets/emoji.png); } .region-screenshot_custom_tools.emoji.region-screenshot_active .region-screenshot_tools_btn { background-image: url(./assets/emoji_active.png); } .region-screenshot_custom_tools.emoji .region-screenshot_tools_options img { width: 20px; margin-right: 10px; cursor: pointer; } .region-screenshot_custom_tools.emoji .region-screenshot_tools_options img.active { filter: brightness(1.2) } </style> </head> <body> </body> <script src="./dist/region-screenshot.umd.js"></script> <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script> <script> let screenshot = new RegionScreenshot({ globalColorOptions: ["red", "pink", "skyblue"],//配置全局颜色选项 regionColor: "#00ff28",//定义选区轮廓颜色 customDrawing: [ { //自定义绘制项的类名 className: "emoji", //自定义绘制项的二级菜单，这里放了四个表情 optionsHtml: ` <img class="active" src="assets/emoji-1.png"/> <img src="assets/emoji-2.png"/> <img src="assets/emoji-3.png"/> <img src="assets/emoji-4.png"/> `, //当创建完二级菜单时这个函数将被调用，函数可以接受到二级菜单dom对象，你可以在这里为菜单添加事件 onOptionsCreated(optionsEl) { $(optionsEl) .find("img") .click(function () { $(this).addClass("active"); $(this).siblings().removeClass("active"); }); }, //当自定义绘制被激活时这个函被调用， //函数可以接受到canvas dom对象和二级菜单dom对象，这里主要是编写向canvas绘制的逻辑 onDrawingOpen(canvasEl, optionsEl, saveCallback) { let ctx = canvasEl.getContext("2d"); canvasEl.style.cursor = "crosshair"; canvasEl.onclick = function (e) { let img = $(optionsEl).find(".active")[0];//获取到二级菜单里被选中的那个表情图片 ctx.drawImage(//将它绘制到点击的位置去 img, e.offsetX - img.naturalWidth / 2, e.offsetY - img.naturalWidth / 2 ); saveCallback();//保存当前画布，注意：为了撤销功能正常运行，请务必调用该回调。！！！ }; }, //当自定义绘制被关闭时调用，这里主要用来关闭对canvas的事件绑定 onDrawingClose(canvasEl,optionsEl) { canvasEl.onclick = null; canvasEl.style.cursor = "default"; }, }, ], }); screenshot.on("screenshotGenerated", (dataUrl) => { console.log(dataUrl)//截图完成时触发，可在回调中接收到截图的base64编码 }); screenshot.on("regionDragging", (region) => { console.log(region)//选区被拖动时茶法，可在回调中接收到选区的位置信息 }) </script> </html>
这样你就得到了一个绘制表情包的功能（酷不酷）：
emoji_active.png 
emoji.png 
emoji-1.png 
emoji-2.png 
emoji-3.png 
emoji-4.png 
它如何工作
region-screenshot-js的核心原理是使用WebRTC（Web Real-Time Communication）技术，读取浏览器标签页信息。因此region-screenshot-js只允许在本地环境或者HTTPS环境中运行。
你也可以通过如下设置使浏览器在在非HTTPS环境中运行region-screenshot-js，假设使用Chrome浏览器： (请谨慎使用，这可能引入安全隐患）：
- 进入chrome://flags/#unsafely-treat-insecure-origin-as-secure
- 在Insecure origins treated as secure文本框中输入你的网站地址，例如：https://www.example.com
- 勾选右侧Enable
总结
本文使用插件region-screenshot-js快速实现了一个web端选区截图功能，并利用插件向外抛出的接口开发了自己的绘制功能，更多配置项或其他相关功能。具体请参阅插件文档。对于该插件的有任何建议或意见，可以在Issues里提出。如果有帮助到你，请点个star。
