bhd-components 0.9.1 → 0.9.3

package/esm/customerService/js-screen-shot/main.js

@@ -0,0 +1,1204 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import CreateDom from "./lib/main-entrance/CreateDom";
+// 导入截图所需样式
+import "./assets/less/screen-shot.less";
+import InitData from "./lib/main-entrance/InitData";
+import { drawMasking } from "./lib/split-methods/DrawMasking";
+import { fixedData, nonNegativeData } from "./lib/common-methods/FixedData";
+import { drawPencil, initPencil } from "./lib/split-methods/DrawPencil";
+import { drawText } from "./lib/split-methods/DrawText";
+import { drawRectangle } from "./lib/split-methods/DrawRectangle";
+import { drawCircle } from "./lib/split-methods/DrawCircle";
+import { DrawArrow } from "./lib/split-methods/DrawArrow";
+import { drawMosaic } from "./lib/split-methods/DrawMosaic";
+import { drawCutOutBox } from "./lib/split-methods/DrawCutOutBox";
+import { zoomCutOutBoxPosition } from "./lib/common-methods/ZoomCutOutBoxPosition";
+import { saveBorderArrInfo } from "./lib/common-methods/SaveBorderArrInfo";
+import { calculateToolLocation } from "./lib/split-methods/CalculateToolLocation";
+import html2canvas from "html2canvas";
+import PlugInParameters from "./lib/main-entrance/PlugInParameters";
+import { getDrawBoundaryStatus } from "./lib/split-methods/BoundaryJudgment";
+import KeyboardEventHandle from "./lib/split-methods/KeyboardEventHandle";
+import { setPlugInParameters } from "./lib/split-methods/SetPlugInParameters";
+import { drawCrossImg } from "./lib/split-methods/drawCrossImg";
+import { getCanvas2dCtx } from "./lib/common-methods/CanvasPatch";
+import { updateContainerMouseStyle } from "./lib/common-methods/UpdateContainerMouseStyle";
+import { addHistory } from "./lib/split-methods/AddHistoryData";
+import { isPC, isTouchDevice } from "./lib/common-methods/DeviceTypeVerif";
+import { drawLineArrow } from "./lib/split-methods/DrawLineArrow";
+var ScreenShot = /*#__PURE__*/ function() {
+    "use strict";
+    function ScreenShot(options) {
+        var _this = this;
+        _class_call_check(this, ScreenShot);
+        var _options, _options1, _options2, _options3;
+        // 当前实例的响应式data数据
+        _define_property(this, "data", void 0);
+        // video容器用于存放屏幕MediaStream流
+        _define_property(this, "videoController", void 0);
+        // 截图区域canvas容器
+        _define_property(this, "screenShotContainer", void 0);
+        _define_property(this, "screenShotDom", null);
+        // 截图工具栏dom
+        _define_property(this, "toolController", void 0);
+        // 截图图片存放容器
+        _define_property(this, "screenShotImageController", void 0);
+        // 截图区域画布
+        _define_property(this, "screenShotCanvas", void 0);
+        // 文本区域dom
+        _define_property(this, "textInputController", void 0);
+        // 截图工具栏画笔选项dom
+        _define_property(this, "optionController", void 0);
+        _define_property(this, "optionIcoController", void 0);
+        // private cutBoxSizeContainer: HTMLDivElement | null | undefined;
+        _define_property(this, "plugInParameters", void 0);
+        _define_property(this, "wrcReplyTime", 500);
+        _define_property(this, "keyboardEventHandle", null);
+        // 图形位置参数
+        _define_property(this, "drawGraphPosition", {
+            startX: 0,
+            startY: 0,
+            width: 0,
+            height: 0
+        });
+        // 临时图形位置参数
+        _define_property(this, "tempGraphPosition", {
+            startX: 0,
+            startY: 0,
+            width: 0,
+            height: 0
+        });
+        _define_property(this, "wrcImgPosition", {
+            x: 0,
+            y: 0,
+            w: 0,
+            h: 0
+        });
+        // 是否隐藏页面滚动条
+        _define_property(this, "hiddenScrollBar", {
+            color: "#000000",
+            fillState: false,
+            state: false,
+            fillWidth: 0,
+            fillHeight: 0
+        });
+        _define_property(this, "wrcWindowMode", false);
+        _define_property(this, "curTabState", true);
+        // 裁剪框边框节点坐标事件
+        _define_property(this, "cutOutBoxBorderArr", []);
+        // 当前操作的边框节点
+        _define_property(this, "borderOption", null);
+        // 点击裁剪框时的鼠标坐标
+        _define_property(this, "movePosition", {
+            moveStartX: 0,
+            moveStartY: 0
+        });
+        // 鼠标拖动状态
+        _define_property(this, "dragFlag", false);
+        // 单击截取屏启用状态
+        _define_property(this, "clickCutFullScreen", false);
+        // 全屏截取状态
+        _define_property(this, "getFullScreenStatus", false);
+        // 上一个裁剪框坐标信息
+        _define_property(this, "drawGraphPrevX", 0);
+        _define_property(this, "drawGraphPrevY", 0);
+        // 马赛克涂抹区域大小
+        _define_property(this, "degreeOfBlur", 5);
+        _define_property(this, "dpr", window.devicePixelRatio || 1);
+        // 截全屏时工具栏展示的位置要减去的高度
+        _define_property(this, "fullScreenDiffHeight", 60);
+        // 截图容器位置信息
+        _define_property(this, "position", {
+            left: 0,
+            top: 0
+        });
+        _define_property(this, "imgSrc", null);
+        _define_property(this, "loadCrossImg", false);
+        // 鼠标是否在裁剪框内
+        _define_property(this, "mouseInsideCropBox", false);
+        _define_property(this, "proxyUrl", undefined);
+        _define_property(this, "useCORS", false);
+        _define_property(this, "drawStatus", false);
+        // webrtc模式下的屏幕流数据
+        _define_property(this, "captureStream", null);
+        _define_property(this, "cropBoxInfo", null);
+        // 文本输入框位置
+        _define_property(this, "textInputPosition", {
+            mouseX: 0,
+            mouseY: 0
+        });
+        // 工具栏显示位置
+        _define_property(this, "placement", "center");
+        // 递增变粗箭头的实现
+        _define_property(this, "drawArrow", new DrawArrow());
+        _define_property(this, "customRightClickEvent", {
+            state: false
+        });
+        _define_property(this, "sendStream", function(stream, cancelCallback, triggerCallback) {
+            if (_instanceof(stream, MediaStream)) {
+                _this.videoController.srcObject = stream;
+                _this.loadScreenFlowData(triggerCallback);
+            } else {
+                if (cancelCallback != null) {
+                    cancelCallback({
+                        code: -1,
+                        msg: "视频流接入失败"
+                    });
+                }
+                // 销毁截图组件
+                _this.data.destroyDOM();
+                throw "视频流接入失败";
+            }
+            return stream;
+        });
+        var _this1 = this;
+        // 开始捕捉屏幕
+        _define_property(this, "startCapture", function() {
+            var _ref = _async_to_generator(function(cancelCallback) {
+                var captureStream, mediaWidth, mediaHeight, displayConfig, err;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            captureStream = null;
+                            mediaWidth = _this1.screenShotImageController.width * _this1.dpr;
+                            mediaHeight = _this1.screenShotImageController.height * _this1.dpr;
+                            displayConfig = {};
+                            // 窗口模式启用时则
+                            if (_this1.wrcWindowMode) {
+                                mediaWidth = window.screen.width * _this1.dpr;
+                                mediaHeight = window.screen.height * _this1.dpr;
+                                // curTabState = true;
+                                displayConfig = {
+                                    displaySurface: "window"
+                                };
+                            }
+                            _state.label = 1;
+                        case 1:
+                            _state.trys.push([
+                                1,
+                                3,
+                                ,
+                                4
+                            ]);
+                            return [
+                                4,
+                                navigator.mediaDevices.getDisplayMedia({
+                                    audio: false,
+                                    video: _object_spread({
+                                        width: mediaWidth,
+                                        height: mediaHeight
+                                    }, displayConfig),
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                    // @ts-ignore
+                                    // 当前标签页默认true   true：不需要选择  false：需要自己选择
+                                    preferCurrentTab: _this1.curTabState
+                                })
+                            ];
+                        case 2:
+                            // console.log("开始捕捉屏幕", { mediaWidth, mediaHeight });
+                            // 捕获屏幕
+                            captureStream = _state.sent();
+                            // 将MediaStream输出至video标签
+                            _this1.videoController.srcObject = captureStream;
+                            // 储存屏幕流数据
+                            _this1.captureStream = captureStream;
+                            return [
+                                3,
+                                4
+                            ];
+                        case 3:
+                            err = _state.sent();
+                            if (cancelCallback != null) {
+                                cancelCallback({
+                                    code: -1,
+                                    msg: "浏览器不支持webrtc或者用户未授权",
+                                    errorInfo: err
+                                });
+                            }
+                            // 销毁截图组件
+                            _this1.data.destroyDOM();
+                            throw "浏览器不支持webrtc或者用户未授权( ".concat(err, " )");
+                        case 4:
+                            return [
+                                2,
+                                captureStream
+                            ];
+                    }
+                });
+            });
+            return function(cancelCallback) {
+                return _ref.apply(this, arguments);
+            };
+        }());
+        // 停止捕捉屏幕
+        _define_property(this, "stopCapture", function() {
+            var srcObject = _this.videoController.srcObject;
+            if (srcObject && "getTracks" in srcObject) {
+                var tracks = srcObject.getTracks();
+                tracks.forEach(function(track) {
+                    return track.stop();
+                });
+                _this.videoController.srcObject = null;
+            }
+        });
+        // 截屏
+        _define_property(this, "screenShot", function(cancelCallback, triggerCallback) {
+            // 开始捕捉屏幕
+            _this.startCapture(cancelCallback).then(function() {
+                _this.loadScreenFlowData(triggerCallback);
+            });
+        });
+        // 鼠标按下事件
+        _define_property(this, "mouseDownEvent", function(event) {
+            // 隐藏颜色选择面板
+            _this.data.setColorPanelStatus(false);
+            // 隐藏文字大小选择面板
+            _this.data.setTextSizeOptionStatus(false);
+            // 非鼠标左键按下则终止
+            if (_instanceof(event, MouseEvent) && event.button != 0) return;
+            // 当前处于移动端触摸时，需要在按下时判断当前坐标点是否处于裁剪框内，主动更新draggingTrim状态（移动端的move事件只会在按下时才会触发）
+            if (isTouchDevice() && _instanceof(event, TouchEvent) && _this.screenShotCanvas) {
+                _this.operatingCutOutBox(event.touches[0].pageX, event.touches[0].pageY, _this.tempGraphPosition.startX, _this.tempGraphPosition.startY, _this.tempGraphPosition.width, _this.tempGraphPosition.height, _this.screenShotCanvas);
+            }
+            // 当前操作的是撤销
+            if (_this.data.getToolName() == "undo") return;
+            _this.data.setDragging(true);
+            _this.drawStatus = false;
+            // 重置工具栏超出状态
+            _this.data.setToolPositionStatus(false);
+            var mouseX = nonNegativeData(_instanceof(event, MouseEvent) ? event.offsetX : event.touches[0].pageX);
+            var mouseY = nonNegativeData(_instanceof(event, MouseEvent) ? event.offsetY : event.touches[0].pageY);
+            // 如果当前操作的是截图工具栏
+            if (_this.data.getToolClickStatus()) {
+                // 记录当前鼠标开始坐标
+                _this.drawGraphPosition.startX = mouseX;
+                _this.drawGraphPosition.startY = mouseY;
+            }
+            // 当前操作的是画笔
+            if (_this.data.getToolName() == "brush" && _this.screenShotCanvas) {
+                // 初始化画笔
+                initPencil(_this.screenShotCanvas, mouseX, mouseY);
+            }
+            // 当前操作的文本
+            if (_this.data.getToolName() == "text" && _this.textInputController && _this.screenShotContainer && _this.screenShotCanvas) {
+                if (!_this.mouseInsideCropBox) {
+                    return;
+                }
+                // 显示文本输入区域
+                _this.data.setTextStatus(true);
+                // 判断输入框位置是否变化
+                if (_this.textInputPosition.mouseX != 0 && _this.textInputPosition.mouseY != 0 && _this.textInputPosition.mouseX != mouseX && _this.textInputPosition.mouseY != mouseY) {
+                    drawText(_this.textInputController.innerText, _this.textInputPosition.mouseX, _this.textInputPosition.mouseY, _this.data.getSelectedColor(), _this.data.getFontSize(), _this.screenShotCanvas);
+                    // 输入框内容不为空时则隐藏
+                    if (_this.textInputController.innerText !== "") {
+                        // 隐藏输入框
+                        _this.data.setTextStatus(false);
+                    }
+                    // 清空文本输入区域的内容
+                    _this.textInputController.innerHTML = "";
+                    // 保存绘制记录
+                    addHistory();
+                }
+                // 计算文本框显示位置, 需要加上截图容器的位置信息
+                var textMouseX = mouseX + _this.position.left;
+                // 设置文本框位置等信息
+                _this.textInputController.style.left = textMouseX + "px";
+                _this.textInputController.style.fontSize = _this.data.getFontSize() + "px";
+                _this.textInputController.style.fontFamily = "none";
+                _this.textInputController.style.color = _this.data.getSelectedColor();
+                // 部分操作需要等dom渲染完毕执行
+                setTimeout(function() {
+                    if (_this.textInputController) {
+                        // 获取输入框容器的高度
+                        var containerHeight = _this.textInputController.offsetHeight;
+                        // 输入框容器y轴的位置需要在坐标的基础上再加上容器高度的一半，容器的位置就正好居中于光标
+                        // canvas渲染的时候就不会出现位置不一致的问题了
+                        var textMouseY = mouseY - Math.floor(containerHeight / 2) + _this.position.top;
+                        _this.textInputController.style.top = textMouseY + "px";
+                        // 获取焦点
+                        _this.textInputController.focus();
+                        // 记录当前输入框位置
+                        _this.textInputPosition = {
+                            mouseX: mouseX,
+                            mouseY: mouseY
+                        };
+                        _this.data.setTextInfo({
+                            positionX: mouseX,
+                            positionY: mouseY,
+                            color: _this.data.getSelectedColor(),
+                            size: _this.data.getFontSize()
+                        });
+                    }
+                });
+            }
+            // 如果操作的是裁剪框
+            if (_this.borderOption) {
+                // 设置为拖动状态
+                _this.data.setDraggingTrim(true);
+                // 记录移动时的起始点坐标
+                _this.movePosition.moveStartX = mouseX;
+                _this.movePosition.moveStartY = mouseY;
+            } else {
+                // 保存当前裁剪框的坐标
+                _this.drawGraphPrevX = _this.drawGraphPosition.startX;
+                _this.drawGraphPrevY = _this.drawGraphPosition.startY;
+                // 绘制裁剪框,记录当前鼠标开始坐标
+                _this.drawGraphPosition.startX = mouseX;
+                _this.drawGraphPosition.startY = mouseY;
+            }
+        });
+        // 鼠标移动事件
+        _define_property(this, "mouseMoveEvent", function(event) {
+            if (_this.screenShotCanvas == null || _this.screenShotContainer == null || _this.data.getToolName() == "undo") {
+                return;
+            }
+            // 去除默认事件
+            event.preventDefault();
+            // 工具栏未选择且鼠标处于按下状态时
+            if (!_this.data.getToolClickStatus() && _this.data.getDragging()) {
+                // 修改拖动状态为true;
+                _this.dragFlag = true;
+            // 隐藏截图工具栏
+            // this.data.setToolStatus(false);
+            // 隐藏裁剪框尺寸显示容器
+            // this.data.setCutBoxSizeStatus(false);
+            }
+            // 获取当前绘制中的工具位置信息
+            var _this_drawGraphPosition = _this.drawGraphPosition, startX = _this_drawGraphPosition.startX, startY = _this_drawGraphPosition.startY, width = _this_drawGraphPosition.width, height = _this_drawGraphPosition.height;
+            // 获取当前鼠标坐标
+            var currentX = nonNegativeData(_instanceof(event, MouseEvent) ? event.offsetX : event.touches[0].pageX);
+            var currentY = nonNegativeData(_instanceof(event, MouseEvent) ? event.offsetY : event.touches[0].pageY);
+            // 绘制中工具的临时宽高
+            var tempWidth = currentX - startX;
+            var tempHeight = currentY - startY;
+            // 工具栏绘制
+            if (_this.data.getToolClickStatus() && _this.data.getDragging()) {
+                // 获取裁剪框位置信息
+                var cutBoxPosition = _this.data.getCutOutBoxPosition();
+                // 绘制中工具的起始x、y坐标不能小于裁剪框的起始坐标
+                // 绘制中工具的起始x、y坐标不能大于裁剪框的结束标作
+                // 当前鼠标的x坐标不能小于裁剪框起始x坐标，不能大于裁剪框的结束坐标
+                // 当前鼠标的y坐标不能小于裁剪框起始y坐标，不能大于裁剪框的结束坐标
+                if (!getDrawBoundaryStatus(startX, startY, cutBoxPosition) || !getDrawBoundaryStatus(currentX, currentY, cutBoxPosition)) return;
+                // 当前操作的不是马赛克则显示最后一次画布绘制时的状态
+                if (_this.data.getToolName() != "mosaicPen") {
+                    _this.showLastHistory();
+                    _this.drawStatus = true;
+                }
+                switch(_this.data.getToolName()){
+                    case "square":
+                        drawRectangle(startX, startY, tempWidth, tempHeight, _this.data.getSelectedColor(), _this.data.getPenSize(), _this.screenShotCanvas);
+                        break;
+                    case "round":
+                        drawCircle(_this.screenShotCanvas, currentX, currentY, startX, startY, _this.data.getPenSize(), _this.data.getSelectedColor());
+                        break;
+                    case "right-top":
+                        // 绘制等比例箭头
+                        if (_this.plugInParameters.getRatioArrow()) {
+                            drawLineArrow(_this.screenShotCanvas, startX, startY, currentX, currentY, 30, 10, _this.data.getPenSize(), _this.data.getSelectedColor());
+                            return;
+                        }
+                        _this.drawArrow.draw(_this.screenShotCanvas, startX, startY, currentX, currentY, _this.data.getSelectedColor(), _this.data.getPenSize());
+                        break;
+                    case "brush":
+                        // 画笔绘制
+                        drawPencil(_this.screenShotCanvas, currentX, currentY, _this.data.getPenSize(), _this.data.getSelectedColor());
+                        break;
+                    case "mosaicPen":
+                        // 当前为马赛克工具则修改绘制状态
+                        // 前面做了判断，此处需要特殊处理
+                        if (!_this.drawStatus) {
+                            _this.showLastHistory();
+                            _this.drawStatus = true;
+                        }
+                        // 绘制马赛克，为了确保鼠标位置在绘制区域中间，所以对x、y坐标进行-10处理
+                        drawMosaic(currentX - 10, currentY - 10, _this.data.getMosaicPenSize(), _this.degreeOfBlur, _this.screenShotCanvas);
+                        break;
+                    default:
+                        break;
+                }
+                return;
+            }
+            // 执行裁剪框操作函数
+            _this.operatingCutOutBox(currentX, currentY, startX, startY, width, height, _this.screenShotCanvas);
+            // 如果鼠标未点击或者当前操作的是裁剪框都return
+            if (!_this.data.getDragging() || _this.data.getDraggingTrim()) return;
+            // 绘制裁剪框
+            _this.tempGraphPosition = drawCutOutBox(startX, startY, tempWidth, tempHeight, _this.screenShotCanvas, _this.data.getBorderSize(), _this.screenShotContainer, _this.screenShotImageController);
+        });
+        // 鼠标抬起事件
+        _define_property(this, "mouseUpEvent", function() {
+            // 当前操作的是撤销
+            if (_this.data.getToolName() == "undo") return;
+            // 绘制结束
+            _this.data.setDragging(false);
+            _this.data.setDraggingTrim(false);
+            // 截图容器判空
+            if (_this.screenShotCanvas == null || _this.screenShotContainer == null) {
+                return;
+            }
+            // 工具栏未点击且鼠标未拖动且单击截屏状态为false则复原裁剪框位置
+            if (!_this.data.getToolClickStatus() && !_this.dragFlag && !_this.clickCutFullScreen) {
+                // 复原裁剪框的坐标
+                _this.drawGraphPosition.startX = _this.drawGraphPrevX;
+                _this.drawGraphPosition.startY = _this.drawGraphPrevY;
+                return;
+            }
+            // 调用者尚未拖拽生成选区
+            // 鼠标尚未拖动
+            // 单击截取屏幕状态为true
+            // 则截取整个屏幕
+            var cutBoxPosition = _this.data.getCutOutBoxPosition();
+            if (cutBoxPosition.width === 0 && cutBoxPosition.height === 0 && cutBoxPosition.startX === 0 && cutBoxPosition.startY === 0 && !_this.dragFlag && _this.clickCutFullScreen) {
+                var borderSize = _this.data.getBorderSize();
+                _this.getFullScreenStatus = true;
+                // 设置裁剪框位置为全屏
+                _this.tempGraphPosition = drawCutOutBox(0, 0, _this.screenShotContainer.width - borderSize / 2, _this.screenShotContainer.height - borderSize / 2, _this.screenShotCanvas, borderSize, _this.screenShotContainer, _this.screenShotImageController);
+            }
+            if (_this.screenShotContainer == null || _this.screenShotCanvas == null) {
+                return;
+            }
+            // 工具栏已点击且进行了绘制
+            if (_this.data.getToolClickStatus() && _this.drawStatus) {
+                // 保存绘制记录
+                addHistory();
+                return;
+            } else if (_this.data.getToolClickStatus() && !_this.drawStatus) {
+                // 工具栏点击了但尚未进行绘制
+                return;
+            }
+            // 保存绘制后的图形位置信息
+            _this.drawGraphPosition = _this.tempGraphPosition;
+            // 如果工具栏未点击则保存裁剪框位置
+            if (!_this.data.getToolClickStatus()) {
+                var _this_drawGraphPosition = _this.drawGraphPosition, startX = _this_drawGraphPosition.startX, startY = _this_drawGraphPosition.startY, width = _this_drawGraphPosition.width, height = _this_drawGraphPosition.height;
+                _this.data.setCutOutBoxPosition(startX, startY, width, height);
+            }
+            // 保存边框节点信息
+            _this.cutOutBoxBorderArr = saveBorderArrInfo(_this.data.getBorderSize(), _this.drawGraphPosition);
+            // 鼠标按下且拖动时重新渲染工具栏
+            if (_this.screenShotContainer != null && _this.dragFlag || _this.clickCutFullScreen) {
+                // 修改鼠标状态为拖动
+                _this.screenShotContainer.style.cursor = "move";
+                // 显示截图工具栏
+                // this.data.setToolStatus(true);
+                // // 显示裁剪框尺寸显示容器
+                // this.data.setCutBoxSizeStatus(true);
+                // 复原拖动状态
+                _this.dragFlag = false;
+                if (_this.toolController != null) {
+                    _this.showToolBar();
+                }
+            }
+        });
+        this.plugInParameters = new PlugInParameters();
+        // 提取options中的有用参数设置到全局参数中
+        setPlugInParameters(options);
+        // 创建截图所需dom并设置回调函数
+        new CreateDom(options);
+        // 创建并获取webrtc模式所需要的辅助dom
+        this.videoController = document.createElement("video");
+        this.videoController.autoplay = true;
+        this.screenShotImageController = document.createElement("canvas");
+        // 实例化响应式data
+        this.data = new InitData();
+        // 设置插件的可选参数
+        this.setOptionalParameter(options);
+        // 获取截图区域canvas容器(获取的同时也会为InitData中的全局变量赋值)
+        this.setGlobalParameter();
+        // 修改截图容器可滚动状态
+        this.data.setNoScrollStatus((_options = options) === null || _options === void 0 ? void 0 : _options.noScroll);
+        // 加载截图组件
+        this.load((_options1 = options) === null || _options1 === void 0 ? void 0 : _options1.triggerCallback, (_options2 = options) === null || _options2 === void 0 ? void 0 : _options2.cancelCallback);
+        if (this.toolController == null || this.screenShotContainer == null || this.textInputController == null) {
+            return;
+        }
+        // 截图组件加载完毕后，对层级进行调整
+        this.adjustContainerLevels(((_options3 = options) === null || _options3 === void 0 ? void 0 : _options3.level) ? options.level : 0);
+        // 创建键盘事件监听
+        this.keyboardEventHandle = new KeyboardEventHandle(this.screenShotContainer, this.toolController);
+        // 给输入容器设置快捷键监听
+        this.registerContainerShortcuts(this.textInputController);
+        if (this.customRightClickEvent.state) {
+            // 给截图容器添加右键事件监听
+            this.registerForRightClickEvent(this.screenShotContainer);
+        }
+    }
+    _create_class(ScreenShot, [
+        {
+            key: "getCanvasController",
+            value: // 获取截图区域canvas容器
+            function getCanvasController() {
+                return this.screenShotContainer;
+            }
+        },
+        {
+            key: "destroyComponents",
+            value: // 销毁组件方法
+            function destroyComponents() {
+                this.data.destroyDOM();
+                this.data.setInitStatus(true);
+            }
+        },
+        {
+            key: "completeScreenshot",
+            value: // 确认截图方法
+            function completeScreenshot() {
+                if (this.keyboardEventHandle) {
+                    this.keyboardEventHandle.triggerEvent("confirm");
+                }
+            }
+        },
+        {
+            key: "registerForRightClickEvent",
+            value: // 注册右键事件
+            function registerForRightClickEvent(container) {
+                var _this = this;
+                container.addEventListener("contextmenu", function(e) {
+                    e.preventDefault();
+                    // 调用者传入了自定义事件则执行
+                    if (_this.customRightClickEvent.handleFn) {
+                        _this.customRightClickEvent.handleFn();
+                        return;
+                    }
+                    // 销毁组件
+                    _this.destroyComponents();
+                });
+            }
+        },
+        {
+            key: "load",
+            value: // 加载截图组件
+            function load(triggerCallback, cancelCallback) {
+                var _this = this;
+                var canvasSize = this.plugInParameters.getCanvasSize();
+                var viewSize = {
+                    width: parseFloat(window.getComputedStyle(document.body).width),
+                    height: parseFloat(window.getComputedStyle(document.body).height)
+                };
+                // 设置截图区域canvas宽高
+                this.data.setScreenShotInfo(viewSize.width, viewSize.height);
+                // 设置截图容器位置
+                this.data.setScreenShotPosition(this.position.left, this.position.top);
+                // 设置截图图片存放容器宽高
+                this.screenShotImageController.width = viewSize.width;
+                this.screenShotImageController.height = viewSize.height;
+                // 用户有传宽高则使用用户传进来的
+                if (canvasSize.canvasWidth !== 0 && canvasSize.canvasHeight !== 0) {
+                    this.data.setScreenShotInfo(canvasSize.canvasWidth, canvasSize.canvasHeight);
+                    this.screenShotImageController.width = canvasSize.canvasWidth;
+                    this.screenShotImageController.height = canvasSize.canvasHeight;
+                }
+                // 获取截图区域canvas容器画布
+                if (this.screenShotContainer == null) return;
+                var context = getCanvas2dCtx(this.screenShotContainer, this.screenShotImageController.width, this.screenShotImageController.height);
+                if (context == null) return;
+                // 显示截图区域容器
+                this.data.showScreenShotPanel();
+                if (!this.plugInParameters.getWebRtcStatus()) {
+                    // 判断用户是否自己传入截屏图片
+                    if (this.imgSrc != null) {
+                        this.drawPictures(triggerCallback, context, this.imgSrc);
+                        return;
+                    }
+                    // html2canvas截屏
+                    html2canvas(this.screenShotDom ? this.screenShotDom : document.body, {
+                        onclone: this.loadCrossImg ? drawCrossImg : undefined,
+                        proxy: this.proxyUrl,
+                        useCORS: this.useCORS
+                    }).then(function(canvas) {
+                        // 装载截图的dom为null则退出
+                        if (_this.screenShotContainer == null) return;
+                        // 存储html2canvas截取的内容
+                        _this.screenShotImageController = canvas;
+                        // 初始化截图容器
+                        _this.initScreenShot(triggerCallback, context, canvas);
+                    }).catch(function(err) {
+                        if (triggerCallback != null) {
+                            // 获取页面元素成功，执行回调函数
+                            triggerCallback({
+                                code: -1,
+                                msg: err
+                            });
+                        }
+                    });
+                    return;
+                }
+                // 调用者有传入屏幕流数据则使用
+                if (this.plugInParameters.getScreenFlow()) {
+                    this.sendStream(this.plugInParameters.getScreenFlow(), cancelCallback, triggerCallback);
+                    return;
+                }
+                // 隐藏光标
+                document.body.classList.add("no-cursor");
+                // 使用webrtc实现截屏
+                this.screenShot(cancelCallback, triggerCallback);
+            }
+        },
+        {
+            key: "loadScreenFlowData",
+            value: function loadScreenFlowData(triggerCallback) {
+                var _this = this;
+                setTimeout(function() {
+                    var _this_screenShotImageController, _this_screenShotImageController1;
+                    // 获取截图区域canvas容器画布
+                    if (_this.screenShotContainer == null) return;
+                    var canvasSize = _this.plugInParameters.getCanvasSize();
+                    var containerWidth = (_this_screenShotImageController = _this.screenShotImageController) === null || _this_screenShotImageController === void 0 ? void 0 : _this_screenShotImageController.width;
+                    var containerHeight = (_this_screenShotImageController1 = _this.screenShotImageController) === null || _this_screenShotImageController1 === void 0 ? void 0 : _this_screenShotImageController1.height;
+                    // 用户有传宽高时，则使用用户的
+                    if (canvasSize.canvasWidth !== 0 && canvasSize.canvasHeight !== 0) {
+                        containerWidth = canvasSize.canvasWidth;
+                        containerHeight = canvasSize.canvasHeight;
+                    }
+                    var imgContainerWidth = containerWidth;
+                    var imgContainerHeight = containerHeight;
+                    if (_this.wrcWindowMode) {
+                        imgContainerWidth = containerWidth * _this.dpr;
+                        imgContainerHeight = containerHeight * _this.dpr;
+                    }
+                    var context = getCanvas2dCtx(_this.screenShotContainer, containerWidth, containerHeight);
+                    var imgContext = getCanvas2dCtx(_this.screenShotImageController, imgContainerWidth, imgContainerHeight);
+                    if (context == null || imgContext == null) return;
+                    // 赋值截图区域canvas画布
+                    _this.screenShotCanvas = context;
+                    var _this_videoController = _this.videoController, videoWidth = _this_videoController.videoWidth, videoHeight = _this_videoController.videoHeight;
+                    if (_this.wrcWindowMode) {
+                        // 从窗口视频流中获取body内容
+                        var bodyImgData = _this.getWindowContentData(videoWidth, videoHeight, containerWidth * _this.dpr, containerHeight * _this.dpr);
+                        if (bodyImgData == null) return;
+                        // 将body内容绘制到图片容器里
+                        imgContext.putImageData(bodyImgData, 0, 0);
+                    } else {
+                        var // console.log("对视频容器的内容进行裁剪", {
+                        //   wrcImgPosition: this.wrcImgPosition,
+                        //   containerWidth,
+                        //   containerHeight,
+                        //   videoWidth,
+                        //   videoHeight,
+                        //   fixWidth,
+                        //   fixHeight
+                        // });
+                        _imgContext;
+                        // 对webrtc源提供的图像宽高进行修复
+                        var fixWidth = containerWidth;
+                        var fixHeight = videoHeight * containerWidth / videoWidth;
+                        if (fixHeight > containerHeight) {
+                            fixWidth = containerWidth * containerHeight / fixHeight;
+                            fixHeight = containerHeight;
+                        }
+                        // 对视频容器的内容进行裁剪
+                        fixWidth = _this.wrcImgPosition.w > 0 ? _this.wrcImgPosition.w : fixWidth;
+                        fixHeight = _this.wrcImgPosition.h > 0 ? _this.wrcImgPosition.h : fixHeight;
+                        (_imgContext = imgContext) === null || _imgContext === void 0 ? void 0 : _imgContext.drawImage(_this.videoController, _this.wrcImgPosition.x, _this.wrcImgPosition.y, fixWidth, fixHeight);
+                        // // 要保存的字符串
+                        // const stringData = imgContext.canvas.toDataURL("png");
+                        // // dada 表示要转换的字符串数据，type 表示要转换的数据格式
+                        // const blob = new Blob([stringData], {
+                        //   type: "text/plain;charset=utf-8"
+                        // });
+                        // // 根据 blob生成 url链接
+                        // const objectURL = URL.createObjectURL(blob);
+                        // // 创建一个 a 标签Tag
+                        // const aTag = document.createElement("a");
+                        // // 设置文件的下载地址
+                        // aTag.href = objectURL;
+                        // // 设置保存后的文件名称
+                        // aTag.download = `${new Date().getTime()}.txt`;
+                        // // 给 a 标签添加点击事件
+                        // aTag.click();
+                        // // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
+                        // // 当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
+                        // URL.revokeObjectURL(objectURL);
+                        // 隐藏滚动条会出现部分内容未截取到，需要进行修复
+                        var diffHeight = containerHeight - fixHeight;
+                        if (_this.hiddenScrollBar.state && diffHeight > 0 && _this.hiddenScrollBar.fillState) {
+                            console.log("填充容器的剩余部分");
+                            // 填充容器的剩余部分
+                            imgContext.beginPath();
+                            var fillWidth = containerWidth;
+                            var fillHeight = diffHeight;
+                            if (_this.hiddenScrollBar.fillWidth > 0) {
+                                fillWidth = _this.hiddenScrollBar.fillWidth;
+                            }
+                            if (_this.hiddenScrollBar.fillHeight > 0) {
+                                fillHeight = _this.hiddenScrollBar.fillHeight;
+                            }
+                            imgContext.rect(0, fixHeight, fillWidth, fillHeight);
+                            imgContext.fillStyle = _this.hiddenScrollBar.color;
+                            imgContext.fill();
+                        }
+                    }
+                    // 初始化截图容器
+                    _this.initScreenShot(undefined, context, _this.screenShotImageController);
+                    var displaySurface = null;
+                    var displayLabel = null;
+                    if (_this.captureStream) {
+                        var _this_captureStream_getVideoTracks__getSettings;
+                        // 获取当前选择的窗口类型
+                        displaySurface = (_this_captureStream_getVideoTracks__getSettings = _this.captureStream.getVideoTracks()[0].getSettings()) === null || _this_captureStream_getVideoTracks__getSettings === void 0 ? void 0 : _this_captureStream_getVideoTracks__getSettings.displaySurface;
+                        // 获取当前选择的标签页标识
+                        displayLabel = _this.captureStream.getVideoTracks()[0].label;
+                    }
+                    // 执行截图成功回调
+                    if (triggerCallback) {
+                        triggerCallback({
+                            code: 0,
+                            msg: "截图加载完成",
+                            displaySurface: displaySurface,
+                            displayLabel: displayLabel
+                        });
+                    }
+                    // 停止捕捉屏幕
+                    _this.stopCapture();
+                    // 重置光标状态
+                    document.body.classList.remove("no-cursor");
+                }, this.wrcReplyTime);
+            }
+        },
+        {
+            key: "adjustContainerLevels",
+            value: // 调整插件容器层级
+            function adjustContainerLevels(level) {
+                if (this.screenShotContainer == null || this.toolController == null || this.textInputController == null || this.optionIcoController == null || this.optionController == null || // this.cutBoxSizeContainer == null ||
+                level <= 0) {
+                    return;
+                }
+                this.screenShotContainer.style.zIndex = "".concat(level);
+                this.toolController.style.zIndex = "".concat(level + 1);
+                this.textInputController.style.zIndex = "".concat(level + 1);
+                this.optionIcoController.style.zIndex = "".concat(level + 1);
+                this.optionController.style.zIndex = "".concat(level + 1);
+            // this.cutBoxSizeContainer.style.zIndex = `${level + 1}`;
+            }
+        },
+        {
+            key: "initCropBox",
+            value: // 初始化裁剪框
+            function initCropBox(cropBoxInfo) {
+                var startX = cropBoxInfo.x;
+                var startY = cropBoxInfo.y;
+                var width = cropBoxInfo.w;
+                var height = cropBoxInfo.h;
+                if (this.screenShotContainer == null) return;
+                this.drawGraphPosition = {
+                    startX: startX,
+                    startY: startY,
+                    width: width,
+                    height: height
+                };
+                this.data.setCutOutBoxPosition(startX, startY, width, height);
+                drawCutOutBox(startX, startY, width, height, this.screenShotCanvas, this.data.getBorderSize(), this.screenShotContainer, this.screenShotImageController);
+                // 保存边框节点信息
+                this.cutOutBoxBorderArr = saveBorderArrInfo(this.data.getBorderSize(), this.drawGraphPosition);
+                // 修改鼠标状态为拖动
+                this.screenShotContainer.style.cursor = "move";
+                // 显示截图工具栏
+                // this.data.setToolStatus(true);
+                // // 显示裁剪框尺寸显示容器
+                // this.data.setCutBoxSizeStatus(true);
+                if (this.toolController != null) {
+                    // 渲染截图工具栏
+                    this.showToolBar();
+                }
+            }
+        },
+        {
+            key: "getWindowContentData",
+            value: /**
+   * 从窗口数据流中截取页面body内容
+   * @param videoWidth 窗口宽度
+   * @param videoHeight 窗口高度
+   * @param containerWidth body内容宽度
+   * @param containerHeight body内容高度
+   * @private
+   */ function getWindowContentData(videoWidth, videoHeight, containerWidth, containerHeight) {
+                var videoCanvas = document.createElement("canvas");
+                videoCanvas.width = videoWidth;
+                videoCanvas.height = videoHeight;
+                var videoContext = getCanvas2dCtx(videoCanvas, videoWidth, videoHeight);
+                if (videoContext) {
+                    videoContext.drawImage(this.videoController, 0, 0);
+                    var startX = 0;
+                    var startY = videoHeight - containerHeight;
+                    var width = containerWidth;
+                    var height = videoHeight - startY;
+                    // 获取裁剪框区域图片信息;
+                    return videoContext.getImageData(startX * this.dpr, startY * this.dpr, width * this.dpr, height * this.dpr);
+                }
+                return null;
+            }
+        },
+        {
+            key: "registerContainerShortcuts",
+            value: // 为指定容器绑定快捷键
+            function registerContainerShortcuts(container) {
+                var _this = this;
+                container.addEventListener("keydown", function(event) {
+                    if (_this.screenShotCanvas == null) return;
+                    // command/ctrl + enter 将输入框的文字绘制到画布内
+                    // 按下ESC时如果有内容则绘制
+                    if ((event.metaKey || event.ctrlKey) && event.code === "Enter" || event.code === "Escape") {
+                        _this.data.setTextEditState(true);
+                        var text = container.innerText;
+                        if (!text || text === "") {
+                            // 隐藏输入框
+                            _this.data.setTextStatus(false);
+                            return;
+                        }
+                        drawText(text, _this.textInputPosition.mouseX, _this.textInputPosition.mouseY, _this.data.getSelectedColor(), _this.data.getFontSize(), _this.screenShotCanvas);
+                        // 清空文本输入区域的内容
+                        container.innerHTML = "";
+                        // 隐藏输入框
+                        _this.data.setTextStatus(false);
+                        // 保存绘制记录
+                        addHistory();
+                    }
+                });
+            }
+        },
+        {
+            key: "showToolBar",
+            value: function showToolBar() {
+                if (this.toolController == null || this.screenShotContainer == null) return;
+                // 计算截图工具栏位置
+                var toolLocation = calculateToolLocation(this.drawGraphPosition, this.toolController.offsetWidth, this.screenShotContainer.width / this.dpr, this.placement, this.position);
+                var containerHeight = this.screenShotContainer.height / this.dpr;
+                // 工具栏的位置超出截图容器时，调整工具栏位置防止超出
+                if (toolLocation.mouseY > containerHeight - 64) {
+                    toolLocation.mouseY -= this.drawGraphPosition.height + 64;
+                    // 超出屏幕顶部时
+                    if (toolLocation.mouseY < 0) {
+                        var containerHeight1 = parseInt(this.screenShotContainer.style.height);
+                        toolLocation.mouseY = containerHeight1 - this.fullScreenDiffHeight;
+                    }
+                    // 设置工具栏超出状态为true
+                    this.data.setToolPositionStatus(true);
+                // // 隐藏裁剪框尺寸显示容器
+                // this.data.setCutBoxSizeStatus(false);
+                }
+                // 当前截取的是全屏，则修改工具栏的位置到截图容器最底部，防止超出
+                if (this.getFullScreenStatus) {
+                    var containerHeight2 = parseInt(this.screenShotContainer.style.height);
+                    // 重新计算工具栏的x轴位置
+                    var toolPositionX = (this.drawGraphPosition.width / this.dpr - this.toolController.offsetWidth) / 2;
+                    toolLocation.mouseY = containerHeight2 - this.fullScreenDiffHeight;
+                    toolLocation.mouseX = toolPositionX;
+                }
+                // 显示并设置截图工具栏位置
+                this.data.setToolInfo(toolLocation.mouseX + this.position.left, toolLocation.mouseY + this.position.top);
+                // // 设置裁剪框尺寸显示容器位置
+                // this.data.setCutBoxSizePosition(
+                //   this.drawGraphPosition.startX,
+                //   this.drawGraphPosition.startY - 35
+                // );
+                // // 渲染裁剪框尺寸
+                // this.data.setCutBoxSize(
+                //   this.drawGraphPosition.width,
+                //   this.drawGraphPosition.height
+                // );
+                // 状态重置
+                this.getFullScreenStatus = false;
+            }
+        },
+        {
+            key: "setGlobalParameter",
+            value: function setGlobalParameter() {
+                this.screenShotContainer = this.data.getScreenShotContainer();
+                this.toolController = this.data.getToolController();
+                this.textInputController = this.data.getTextInputController();
+                this.optionController = this.data.getOptionController();
+                this.optionIcoController = this.data.getOptionIcoController();
+            // this.cutBoxSizeContainer = this.data.getCutBoxSizeContainer() as HTMLDivElement | null;
+            }
+        },
+        {
+            key: "setOptionalParameter",
+            value: function setOptionalParameter(options) {
+                var _options, _options1, _options2, _options3, _options4, _options5, _options6, _options7, _options8, _options9, _options10, _options11, _options12, _options13, _options14;
+                // 单击截取全屏启用状态,默认为false
+                if (((_options = options) === null || _options === void 0 ? void 0 : _options.clickCutFullScreen) === true) {
+                    this.clickCutFullScreen = true;
+                }
+                // 判断调用者是否传了截图进来
+                if (((_options1 = options) === null || _options1 === void 0 ? void 0 : _options1.imgSrc) != null) {
+                    this.imgSrc = options.imgSrc;
+                }
+                // 是否加载跨域图片
+                if (((_options2 = options) === null || _options2 === void 0 ? void 0 : _options2.loadCrossImg) === true) {
+                    this.loadCrossImg = true;
+                }
+                // 跨域时的代理服务器地址
+                if ((_options3 = options) === null || _options3 === void 0 ? void 0 : _options3.proxyUrl) {
+                    this.proxyUrl = options.proxyUrl;
+                }
+                if ((_options4 = options) === null || _options4 === void 0 ? void 0 : _options4.useCORS) {
+                    this.useCORS = options.useCORS;
+                }
+                // 设置截图容器的位置信息
+                if (((_options5 = options) === null || _options5 === void 0 ? void 0 : _options5.position) != null) {
+                    var _options_position, _options_position1;
+                    if (((_options_position = options.position) === null || _options_position === void 0 ? void 0 : _options_position.top) != null) {
+                        this.position.top = options.position.top;
+                    }
+                    if (((_options_position1 = options.position) === null || _options_position1 === void 0 ? void 0 : _options_position1.left) != null) {
+                        this.position.left = options.position.left;
+                    }
+                }
+                // 截图容器dom
+                if ((_options6 = options) === null || _options6 === void 0 ? void 0 : _options6.screenShotDom) {
+                    this.screenShotDom = options.screenShotDom;
+                }
+                // webrtc截图等待时间
+                if ((_options7 = options) === null || _options7 === void 0 ? void 0 : _options7.wrcReplyTime) {
+                    this.wrcReplyTime = options.wrcReplyTime;
+                }
+                // 是否初始化裁剪框
+                if ((_options8 = options) === null || _options8 === void 0 ? void 0 : _options8.cropBoxInfo) {
+                    this.cropBoxInfo = options.cropBoxInfo;
+                }
+                // 是否需要更改工具栏的展示位置
+                if ((_options9 = options) === null || _options9 === void 0 ? void 0 : _options9.toolPosition) {
+                    this.placement = options.toolPosition;
+                }
+                // 是否需要对webrtc模式下捕获到的内容进行裁剪
+                if ((_options10 = options) === null || _options10 === void 0 ? void 0 : _options10.wrcImgPosition) {
+                    var _options_wrcImgPosition = options.wrcImgPosition, x = _options_wrcImgPosition.x, y = _options_wrcImgPosition.y;
+                    // 坐标需要取负数才能正确的裁剪
+                    this.wrcImgPosition.x = Math.abs(x) * -1;
+                    this.wrcImgPosition.y = Math.abs(y) * -1;
+                }
+                // 是否隐藏滚动条
+                if (((_options11 = options) === null || _options11 === void 0 ? void 0 : _options11.hiddenScrollBar) != null) {
+                    var _options_hiddenScrollBar = options.hiddenScrollBar, state = _options_hiddenScrollBar.state, color = _options_hiddenScrollBar.color, fillWidth = _options_hiddenScrollBar.fillWidth, fillHeight = _options_hiddenScrollBar.fillHeight, fillState = _options_hiddenScrollBar.fillState;
+                    this.hiddenScrollBar = {
+                        state: state,
+                        color: color ? color : "#000000",
+                        fillWidth: fillWidth ? fillWidth : 0,
+                        fillHeight: fillHeight ? fillHeight : 0,
+                        fillState: fillState ? fillState : false
+                    };
+                    if (state) {
+                        this.data.setResetScrollbarState(true);
+                        // 设置页面宽高并隐藏滚动条
+                        document.documentElement.classList.add("hidden-screen-shot-scroll");
+                        document.body.classList.add("hidden-screen-shot-scroll");
+                    }
+                }
+                // 是否启用窗口截图模式
+                if (((_options12 = options) === null || _options12 === void 0 ? void 0 : _options12.wrcWindowMode) != null) {
+                    this.wrcWindowMode = options.wrcWindowMode;
+                }
+                if (((_options13 = options) === null || _options13 === void 0 ? void 0 : _options13.curTabState) != null) {
+                    this.curTabState = options.curTabState;
+                }
+                if (((_options14 = options) === null || _options14 === void 0 ? void 0 : _options14.customRightClickEvent) != null) {
+                    this.customRightClickEvent = options.customRightClickEvent;
+                }
+            }
+        },
+        {
+            key: "operatingCutOutBox",
+            value: /**
+   * 操作裁剪框
+   * @param currentX 裁剪框当前x轴坐标
+   * @param currentY 裁剪框当前y轴坐标
+   * @param startX 鼠标x轴坐标
+   * @param startY 鼠标y轴坐标
+   * @param width 裁剪框宽度
+   * @param height 裁剪框高度
+   * @param context 需要进行绘制的canvas画布
+   * @private
+   */ function operatingCutOutBox(currentX, currentY, startX, startY, width, height, context) {
+                // canvas元素不存在
+                if (this.screenShotContainer == null) {
+                    return;
+                }
+                // 获取鼠标按下时的坐标
+                var _this_movePosition = this.movePosition, moveStartX = _this_movePosition.moveStartX, moveStartY = _this_movePosition.moveStartY;
+                // 裁剪框边框节点事件存在且裁剪框未进行操作，则对鼠标样式进行修改
+                if (this.cutOutBoxBorderArr.length > 0 && !this.data.getDraggingTrim()) {
+                    // 标识鼠标是否在裁剪框内
+                    var flag = false;
+                    // 判断鼠标位置
+                    context.beginPath();
+                    for(var i = 0; i < this.cutOutBoxBorderArr.length; i++){
+                        context.rect(this.cutOutBoxBorderArr[i].x, this.cutOutBoxBorderArr[i].y, this.cutOutBoxBorderArr[i].width, this.cutOutBoxBorderArr[i].height);
+                        // 当前坐标点处于8个可操作点上，修改鼠标指针样式
+                        if (context.isPointInPath(currentX * this.dpr, currentY * this.dpr)) {
+                            switch(this.cutOutBoxBorderArr[i].index){
+                                case 1:
+                                    if (this.data.getToolClickStatus()) {
+                                        // 修改截图容器内的鼠标样式
+                                        updateContainerMouseStyle(this.screenShotContainer, this.data.getActiveToolName());
+                                    } else {
+                                        this.screenShotContainer.style.cursor = "move";
+                                    }
+                                    break;
+                                case 2:
+                                    // 工具栏被点击则不改变指针样式
+                                    if (this.data.getToolClickStatus()) break;
+                                    this.screenShotContainer.style.cursor = "ns-resize";
+                                    break;
+                                case 3:
+                                    if (this.data.getToolClickStatus()) break;
+                                    this.screenShotContainer.style.cursor = "ew-resize";
+                                    break;
+                                case 4:
+                                    if (this.data.getToolClickStatus()) break;
+                                    this.screenShotContainer.style.cursor = "nwse-resize";
+                                    break;
+                                case 5:
+                                    if (this.data.getToolClickStatus()) break;
+                                    this.screenShotContainer.style.cursor = "nesw-resize";
+                                    break;
+                                default:
+                                    break;
+                            }
+                            this.borderOption = this.cutOutBoxBorderArr[i].option;
+                            flag = true;
+                            break;
+                        }
+                    }
+                    this.mouseInsideCropBox = flag;
+                    context.closePath();
+                    if (!flag) {
+                        // 鼠标移出裁剪框重置鼠标样式
+                        this.screenShotContainer.style.cursor = "default";
+                        // 重置当前操作的边框节点为null
+                        this.borderOption = null;
+                    }
+                }
+                // 裁剪框正在被操作
+                if (this.data.getDraggingTrim()) {
+                    // 当前操作节点为1时则为移动裁剪框
+                    if (this.borderOption === 1) {
+                        // 计算要移动的x轴坐标
+                        var x = fixedData(currentX - (moveStartX - startX), width, this.screenShotContainer.width);
+                        // 计算要移动的y轴坐标
+                        var y = fixedData(currentY - (moveStartY - startY), height, this.screenShotContainer.height);
+                        // 计算画布面积
+                        var containerWidth = this.screenShotContainer.width / this.dpr;
+                        var containerHeight = this.screenShotContainer.height / this.dpr;
+                        // 计算裁剪框在画布上所占的面积
+                        var cutOutBoxSizeX = x + width;
+                        var cutOutBoxSizeY = y + height;
+                        // 超出画布的可视区域，进行位置修正
+                        if (cutOutBoxSizeX > containerWidth) {
+                            x = containerWidth - width;
+                        }
+                        if (cutOutBoxSizeY > containerHeight) {
+                            y = containerHeight - height;
+                        }
+                        // 重新绘制裁剪框
+                        this.tempGraphPosition = drawCutOutBox(x, y, width, height, context, this.data.getBorderSize(), this.screenShotContainer, this.screenShotImageController);
+                    } else {
+                        // 裁剪框其他8个点的拖拽事件
+                        var _zoomCutOutBoxPosition = zoomCutOutBoxPosition(currentX, currentY, startX, startY, width, height, this.borderOption), tempStartX = _zoomCutOutBoxPosition.tempStartX, tempStartY = _zoomCutOutBoxPosition.tempStartY, tempWidth = _zoomCutOutBoxPosition.tempWidth, tempHeight = _zoomCutOutBoxPosition.tempHeight;
+                        // 绘制裁剪框
+                        this.tempGraphPosition = drawCutOutBox(tempStartX, tempStartY, tempWidth, tempHeight, context, this.data.getBorderSize(), this.screenShotContainer, this.screenShotImageController);
+                    }
+                }
+            }
+        },
+        {
+            key: "showLastHistory",
+            value: /**
+   * 显示最新的画布状态
+   * @private
+   */ function showLastHistory() {
+                if (this.screenShotCanvas != null) {
+                    var context = this.screenShotCanvas;
+                    if (this.data.getHistory().length <= 0) {
+                        addHistory();
+                    }
+                    context.putImageData(this.data.getHistory()[this.data.getHistory().length - 1]["data"], 0, 0);
+                }
+            }
+        },
+        {
+            key: "setScreenShotContainerEventListener",
+            value: // 为截图容器添加鼠标||触摸的事件监听
+            function setScreenShotContainerEventListener() {
+                var // 设置触摸监听
+                _this_screenShotContainer, _this_screenShotContainer1, _this_screenShotContainer2;
+                if (isPC()) {
+                    var // 添加鼠标事件监听
+                    _this_screenShotContainer3, _this_screenShotContainer4, _this_screenShotContainer5;
+                    (_this_screenShotContainer3 = this.screenShotContainer) === null || _this_screenShotContainer3 === void 0 ? void 0 : _this_screenShotContainer3.addEventListener("mousedown", this.mouseDownEvent);
+                    (_this_screenShotContainer4 = this.screenShotContainer) === null || _this_screenShotContainer4 === void 0 ? void 0 : _this_screenShotContainer4.addEventListener("mousemove", this.mouseMoveEvent);
+                    (_this_screenShotContainer5 = this.screenShotContainer) === null || _this_screenShotContainer5 === void 0 ? void 0 : _this_screenShotContainer5.addEventListener("mouseup", this.mouseUpEvent);
+                }
+                // 设备不支持触摸事件则退出
+                if (!isTouchDevice()) return;
+                (_this_screenShotContainer = this.screenShotContainer) === null || _this_screenShotContainer === void 0 ? void 0 : _this_screenShotContainer.addEventListener("touchstart", this.mouseDownEvent, false);
+                (_this_screenShotContainer1 = this.screenShotContainer) === null || _this_screenShotContainer1 === void 0 ? void 0 : _this_screenShotContainer1.addEventListener("touchmove", this.mouseMoveEvent, false);
+                (_this_screenShotContainer2 = this.screenShotContainer) === null || _this_screenShotContainer2 === void 0 ? void 0 : _this_screenShotContainer2.addEventListener("touchend", this.mouseUpEvent, false);
+            }
+        },
+        {
+            key: "drawPictures",
+            value: /**
+   * 向截图容器中绘制图片
+   * @param triggerCallback
+   * @param context
+   * @param imgSrc
+   * @private
+   */ function drawPictures(triggerCallback, context, imgSrc) {
+                var _this = this;
+                var imgContainer = new Image();
+                imgContainer.src = imgSrc;
+                imgContainer.width = this.screenShotImageController.width;
+                imgContainer.height = this.screenShotImageController.height;
+                imgContainer.crossOrigin = "Anonymous";
+                imgContainer.onload = function() {
+                    var // 将用户传递的图片绘制到图片容器里
+                    _this_screenShotImageController_getContext;
+                    // 装载截图的dom为null则退出
+                    if (_this.screenShotContainer == null) return;
+                    (_this_screenShotImageController_getContext = _this.screenShotImageController.getContext("2d")) === null || _this_screenShotImageController_getContext === void 0 ? void 0 : _this_screenShotImageController_getContext.drawImage(imgContainer, 0, 0, _this.screenShotImageController.width, _this.screenShotImageController.height);
+                    // 初始化截图容器
+                    _this.initScreenShot(triggerCallback, context, _this.screenShotImageController);
+                };
+            }
+        },
+        {
+            key: "initScreenShot",
+            value: /**
+   * 初始化截图容器
+   * @param triggerCallback
+   * @param context
+   * @param screenShotContainer
+   * @private
+   */ function initScreenShot(triggerCallback, context, screenShotContainer) {
+                if (triggerCallback != null) {
+                    // 加载成功，执行回调函数
+                    triggerCallback({
+                        code: 0,
+                        msg: "截图加载完成"
+                    });
+                }
+                // 赋值截图区域canvas画布
+                this.screenShotCanvas = context;
+                // 存储屏幕截图
+                this.data.setScreenShotImageController(screenShotContainer);
+                // 绘制蒙层
+                drawMasking(context, screenShotContainer);
+                // 截图容器添加鼠标点击/触摸事件的监听
+                this.setScreenShotContainerEventListener();
+                // 是否初始化裁剪框
+                if (this.cropBoxInfo != null && Object.keys(this.cropBoxInfo).length == 4) {
+                    this.initCropBox(this.cropBoxInfo);
+                }
+            }
+        }
+    ]);
+    return ScreenShot;
+}();
+export { ScreenShot as default };