前言
👉👉👉👉在线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。
