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 浏览器： (请谨慎使用，这可能引入安全隐患）：

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

regionSizeIndicator

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";
      },
    },
  ],
});

Event

代码示例

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 选择和事件绑定是使用了该插件）