region-screenshot-js

一个 web 端选区截图插件，帮助你快速构建出精美的选区截图功能。喜欢的话给个 star 吧 https://github.com/weijun-lab/region-screenshot-js

🎨在线 Demo

https://weijun-lab.github.io/region-screenshot-js/

它如何工作

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

安装

npm install region-screenshot-js
Or download the repository

使用

ESM(ECMAScript Modules)

import RegionScreenshot from "region-screenshot-js";

UMD(Universal Module Definition)

<script src="region-screenshot-js/region-screenshot.umd.js"></script>

let screenshot = new RegionScreenshot();

代码示例

let screenshot = new RegionScreenshot();
screenshot.on("screenshotGenerated",(dataUrl)=>{
	console.log(dataUrl);
})

文档

Options

配置项	类型	默认值	描述
downloadName	String	screenshot	截图下载文件名
regionColor	String	#409eff	选区轮廓颜色
maskColor	String	rgba(0,0,0,0.5)	遮罩层颜色
globalColorOptions	Array	[ "#ff3a3a","#f8b60f", "#0083ff","#40ff00", "#363636","#e9e9e9" ]	配置所有绘制项可供选择的颜色（当绘制项有单独的颜色配置时，该配置无效）
regionSizeIndicator	Object	{...}	左上角区域大小指示器样式（见下文）
rectangleOptions	Object	{ color:globalColorOptions, size: [4, 6, 8] }	配置矩形绘制项可供选择的颜色和线宽
circleOptions	Object	{ color:globalColorOptions, size: [4, 6, 8] }	配置圆形绘制项可供选择的颜色和线宽
paintOptions	Object	{ color:globalColorOptions, size: [4, 6, 8] }	配置自由画笔绘制项可供选择的颜色和线宽
mosaicOptions	Object	{ size: [6, 8, 10] }	配置马赛克绘制项可供选择的线宽
textOptions	Object	{ color:globalColorOptions, size: [16, 18, 20] }	配置文字绘制项可供选择的颜色和字体尺寸
arrowOptions	Object	{ color:globalColorOptions, size: [4, 6, 8] }	配置箭头绘制项可供选择的颜色和线宽
customDrawing	Array <customDrawingObject>	-	自定义绘制（见下文）

regionSizeIndicator

Options	Type	Default	Description
show	Boolean	true	尺寸指示器是否显示
color	String	#ffffff	尺寸指示器颜色
fontSize	Number	14	尺寸指示器尺寸

customDrawingObject

Code Example

//其中“$”来自于 jquery.js
let screenshot = new RegionScreenshot({
  customDrawing: [
    {
      className: "triangle",
      optionsHtml: `
        <div class="triangle-size-options active" size="3">min</div>
        <div class="triangle-size-options" size="5">middle</div>
        <div class="triangle-size-options" size="7">max</div>
      `,
      onOptionsCreated(optionsEl) {
        $(optionsEl)
          .find("div")
          .click(function () {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
          });
      },
      onDrawingOpen(canvasEl,optionsEl,saveCallback) {
        let ctx = canvasEl.getContext("2d");
        canvasEl.style.cursor = "crosshair";
        canvasEl.onclick = function (e) {
          ctx.beginPath();
          ctx.lineWidth = $(optionsEl).find(".triangle-size-options.active").attr("size");
          ctx.moveTo(e.offsetX, e.offsetY - 10);
          ctx.lineTo(e.offsetX - 10, e.offsetY + 10);
          ctx.lineTo(e.offsetX + 10, e.offsetY + 10);
          ctx.closePath();
          ctx.stroke();
          saveCallback();//请在绘制结束后调用保存回调，以确保插件的撤销功能正常
        };
      },
      onDrawingClose(canvasEl) {
        canvasEl.onclick = null;
        canvasEl.style.cursor = "default";
      },
    },
  ],
});

配置项	类型	描述
className	String	自定义绘制项的类名
optionsHtml	String	定义自定义绘制项二级菜单的 html 内容
onOptionsCreated	Function	当自定义绘制项的二级菜单创建完成该函数将被调用，可在参数中获取到`二级菜单 dom 对象`
onDrawingOpen	Function	当自定义绘制项被激活时该函数将被调用，可在参数中获取到`canvas dom 对象`、`二级菜单 dom 对象`、`保存历史记录函数`，注意：请在每次自定义绘制结束后调用`保存历史记录函数`，以确保插件的撤销功能正常
onDrawingClose	Function	当自定义绘制项被关闭时该函数将被调用，可在参数中获取到`canvas dom 对象`、`二级菜单 dom 对象`

Event

代码示例

let screenshot = new RegionScreenshot();
screenshot.on("successCreated",(dataUrl)=>{
	console.log("插件初始化成功");
});
screenshot.on("screenshotGenerated",(dataUrl)=>{
	console.log(dataUrl);
});

事件名称	描述
screenshotGenerated	截图生成完成时触发，可在回调中获取`图片 base64 编码`
screenshotDownload	截图被下载时触发，可在回调中获取`图片 base64 编码`
regionDragging	选区尺寸或位置改变时触发，可在回调中获取`选区的详细位置信息`
regionDragStart	选区尺寸或位置改变前触发，可在回调中获取`选区的详细位置信息`
regionDragEnd	选区尺寸或位置改变后触发，可在回调中获取`选区的详细位置信息`
successCreated	插件初始化成功时触发
errorCreated	插件初始化失败时触发，可在回调中接受`错误信息`
closed	插件被关闭时触发

🎉致谢与引用

感谢以下插件，他们为 region-screenshot-js 实现提供了支持.

dom-to-image 一个将 dom 节点转换成图片的插件（在文字绘制时使用了该插件）
jquery jquery 是一个快速、简洁的 JavaScript 框架（在 dom 选择和事件绑定是使用了该插件）