1.1.0 • Published 1 year ago

region-screenshot-js v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

region-screenshot-js


语言: English / 简体中文


一个web端选区截图插件,帮助你快速构建出精美的选区截图功能。


🎨在线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浏览器: (请谨慎使用,这可能引入安全隐患)
1. 进入chrome://flags/#unsafely-treat-insecure-origin-as-secure 2. 在Insecure origins treated as secure文本框中输入你的网站地址,例如:https://www.example.com 3. 勾选右侧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

配置项类型默认值描述
downloadNameStringscreenshot截图下载文件名
regionColorString#409eff选区轮廓颜色
maskColorStringrgba(0,0,0,0.5)遮罩层颜色
globalColorOptionsArray"#ff3a3a","#f8b60f","#0083ff","#40ff00","#363636","#e9e9e9"配置所有绘制项可供选择的颜色(当绘制项有单独的颜色配置时,该配置无效)
regionSizeIndicatorObject{...}左上角区域大小指示器样式(见下文)
rectangleOptionsObject{color:globalColorOptions,size: 4, 6, 8}配置矩形绘制项可供选择的颜色和线宽
circleOptionsObject{color:globalColorOptions,size: 4, 6, 8}配置圆形绘制项可供选择的颜色和线宽
paintOptionsObject{color:globalColorOptions,size: 4, 6, 8}配置自由画笔绘制项可供选择的颜色和线宽
mosaicOptionsObject{size: 6, 8, 10}配置马赛克绘制项可供选择的线宽
textOptionsObject{color:globalColorOptions,size: 16, 18, 20}配置文字绘制项可供选择的颜色和字体尺寸
arrowOptionsObject{color:globalColorOptions,size: 4, 6, 8}配置箭头绘制项可供选择的颜色和线宽
initialRegionObject-初始化时自动选取所配置的区域
customDrawingArray<customDrawingObject>-自定义绘制(见下文)

regionSizeIndicator

OptionsTypeDefaultDescription
showBooleantrue尺寸指示器是否显示
colorString#ffffff尺寸指示器颜色
fontSizeNumber14尺寸指示器尺寸

initialRegion

OptionsTypeDefaultDescription
leftNumber-初始化选区的横向起始位置
topNumber-初始化选区的纵向起始位置
widthNumber-初始化选区的宽度
heightNumber-初始化选区的高度

customDrawingObject

配置项类型描述
classNameString自定义绘制项的类名
optionsHtmlString定义自定义绘制项二级菜单的html内容
onOptionsCreatedFunction当自定义绘制项的二级菜单创建完成该函数将被调用,可在参数中获取到二级菜单dom对象
onDrawingOpenFunction当自定义绘制项被激活时该函数将被调用,可在参数中获取到canvas dom对象二级菜单dom对象保存历史记录函数,注意:请在每次自定义绘制结束后调用保存历史记录函数,以确保插件的撤销功能正常
onDrawingCloseFunction当自定义绘制项被关闭时该函数将被调用,可在参数中获取到canvas dom对象二级菜单dom对象
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";
      },
    },
  ],
});

Event

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

代码示例

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

🎉致谢与引用

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

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

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago