A web-based selection screenshot plugin that helps you quickly build a beautiful and functional screenshot selection feature.
https://weijun-lab.github.io/region-screenshot-js/
The core principle of region-screenshot-js relies on WebRTC (Web Real-Time Communication) technology to read browser tab information. Therefore, region-screenshot-js can only operate in a local environment or under HTTPS.
For running region-screenshot-js in non-HTTPS environments (use with caution as this may introduce security risks), follow these steps in Chrome:
- Navigate to
chrome://flags/#unsafely-treat-insecure-origin-as-secure. - Input your website address into the 'Insecure origins treated as secure' field, e.g.,
http://www.example.com. - Toggle the "Enable" option.
npm install region-screenshot-js- Or download the repository
import RegionScreenshot from "region-screenshot-js";<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 | Type | Default | Description |
|---|---|---|---|
| downloadName | String | screenshot | Screenshot Download Filename |
| regionColor | String | #409eff | region outline color |
| maskColor | String | rgba(0,0,0,0.5) | Mask layer color |
| globalColorOptions | String | [ "#ff3a3a","#f8b60f", "#0083ff","#40ff00", "#363636","#e9e9e9" ] |
Available colors for all drawing items (overrides when individual item has its color config) |
| regionSizeIndicator | Object | {...} | Top-left region size indicator styles (see below) |
| rectangleOptions | Object | { color:globalColorOptions, size: [4, 6, 8] } |
Configures available colors and line widths for rectangle drawing |
| circleOptions | Object | { color:globalColorOptions, size: [4, 6, 8] } |
Configures available colors and line widths for circle drawing |
| paintOptions | Object | { color:globalColorOptions, size: [4, 6, 8] } |
Configures available colors and line widths for freehand drawing |
| mosaicOptions | Object | { size: [6, 8, 10] } |
Configures available line widths for Mosaic |
| textOptions | Object | { color:globalColorOptions, size: [16, 18, 20] } |
Configures available text colors and font sizes |
| arrowOptions | Object | { color:globalColorOptions, size: [4, 6, 8] } |
Configures available arrow colors and line widths |
| customDrawing | Array <customDrawingObject> |
- | Custom drawings (see below) |
| Options | Type | Default | Description |
|---|---|---|---|
| show | Boolean | true | Whether the size indicator is shown |
| color | String | #ffffff | Size indicator color |
| fontSize | Number | 14 | Size indicator font size |
// "$" is from 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();// Call after each custom draw to ensure undo function works properly
};
},
onDrawingClose(canvasEl) {
canvasEl.onclick = null;
canvasEl.style.cursor = "default";
},
},
],
});| Options | Type | Description |
|---|---|---|
| className | String | Custom class name for the drawing item |
| optionsHtml | String | Defines the HTML content for the secondary menu of the custom drawing item |
| onOptionsCreated | Function | This function is called when the secondary menu of the custom drawing item is created. The parameter allows access to the secondary menu DOM object. |
| onDrawingOpen | Function | This function is invoked when the custom drawing item is activated. Parameters provide access to the canvas DOM object,secondary menu DOM object, and a function to save history. Note: Please invoke the function to save history after each custom drawing action to ensure the undo feature of the plugin functions correctly. |
| onDrawingClose | Function | This function is called when the custom drawing item is closed.Parameters provide access to the canvas DOM object,secondary menu DOM object |
let screenshot = new RegionScreenshot();
screenshot.on("successCreated",(dataUrl)=>{
console.log("Plugin initialized successfully.");
});
screenshot.on("screenshotGenerated",(dataUrl)=>{
console.log(dataUrl);
});| Event | Description |
|---|---|
| screenshotGenerated | Triggered upon screenshot completion; retrieves the image base64 encoding in callback |
| screenshotDownload | Triggered when the screenshot is downloaded; retrieves the image base64 encoding in callback |
| regionDragging | Triggered when the region size or position changes; retrieves detailed region position info |
| regionDragStart | Triggered before region size or position change; retrieves detailed region position info |
| regionDragEnd | Triggered after region size or position change; retrieves detailed region position info |
| successCreated | Triggered upon successful plugin initialization |
| errorCreated | Triggered on plugin initialization failure; receives an error message in callback |
| closed | Triggered when the plugin is closed |
I gratitude to the following open-source plugins, which have provided essential support for the functionality.
- dom-to-image A plugin to convert DOM nodes into images (used for text drawing).
- jquery A fast, concise JavaScript library (utilized for DOM selection and event binding).