bhd-components 0.9.1 → 0.9.2

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawLineArrow.js

@@ -0,0 +1,51 @@
+/**
+ * 绘制箭头
+ * @param context 需要进行绘制的画布
+ * @param mouseStartX 鼠标按下时的x轴坐标 P1
+ * @param mouseStartY 鼠标按下式的y轴坐标 P1
+ * @param mouseX 当前鼠标x轴坐标 P2
+ * @param mouseY 当前鼠标y轴坐标 P2
+ * @param theta 箭头斜线与直线的夹角角度 (θ) P3 ---> (P1、P2) || P4 ---> P1(P1、P2)
+ * @param slashLength 箭头斜线的长度 P3 ---> P2 || P4 ---> P2
+ * @param borderWidth 边框宽度
+ * @param color 边框颜色
+ */ export function drawLineArrow(context, mouseStartX, mouseStartY, mouseX, mouseY, theta, slashLength, borderWidth, color) {
+    /**
+   * 已知:
+   *    1. P1、P2的坐标
+   *    2. 箭头斜线(P3 || P4) ---> P2直线的长度
+   *    3. 箭头斜线(P3 || P4) ---> (P1、P2)直线的夹角角度(θ)
+   * 求:
+   *    P3、P4的坐标
+   */ const angle = Math.atan2(mouseStartY - mouseY, mouseStartX - mouseX) * 180 / Math.PI, angle1 = (angle + theta) * Math.PI / 180, angle2 = (angle - theta) * Math.PI / 180, topX = slashLength * Math.cos(angle1), topY = slashLength * Math.sin(angle1), botX = slashLength * Math.cos(angle2), botY = slashLength * Math.sin(angle2); // P4点的Y轴坐标
+    // 开始绘制
+    context.save();
+    context.beginPath();
+    // P3的坐标位置
+    let arrowX = mouseStartX - topX, arrowY = mouseStartY - topY;
+    // 移动笔触到P3坐标
+    context.moveTo(arrowX, arrowY);
+    // 移动笔触到P1
+    context.moveTo(mouseStartX, mouseStartY);
+    // 绘制P1到P2的直线
+    context.lineTo(mouseX, mouseY);
+    // 计算P3的位置
+    arrowX = mouseX + topX;
+    arrowY = mouseY + topY;
+    // 移动笔触到P3坐标
+    context.moveTo(arrowX, arrowY);
+    // 绘制P2到P3的斜线
+    context.lineTo(mouseX, mouseY);
+    // 计算P4的位置
+    arrowX = mouseX + botX;
+    arrowY = mouseY + botY;
+    // 绘制P2到P4的斜线
+    context.lineTo(arrowX, arrowY);
+    // 上色
+    context.strokeStyle = color;
+    context.lineWidth = borderWidth;
+    // 填充
+    context.stroke();
+    // 结束绘制
+    context.restore();
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawMasking.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 绘制蒙层
+ * @param context 需要进行绘制canvas
+ * @param imgData 屏幕截图canvas容器
+ */
+export declare function drawMasking(context: CanvasRenderingContext2D, imgData?: HTMLCanvasElement): void;

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawMasking.js

@@ -0,0 +1,41 @@
+import PlugInParameters from "../main-entrance/PlugInParameters";
+/**
+ * 绘制蒙层
+ * @param context 需要进行绘制canvas
+ * @param imgData 屏幕截图canvas容器
+ */ export function drawMasking(context, imgData) {
+    const data = new PlugInParameters();
+    const plugInParameters = new PlugInParameters();
+    const canvasSize = plugInParameters.getCanvasSize();
+    const viewSize = {
+        width: parseFloat(window.getComputedStyle(document.body).width),
+        height: parseFloat(window.getComputedStyle(document.body).height)
+    };
+    const maxWidth = Math.max(viewSize.width || 0, Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), Math.max(document.body.offsetWidth, document.documentElement.offsetWidth), Math.max(document.body.clientWidth, document.documentElement.clientWidth));
+    const maxHeight = Math.max(viewSize.height || 0, Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), Math.max(document.body.clientHeight, document.documentElement.clientHeight));
+    // 清除画布
+    context.clearRect(0, 0, maxWidth, maxHeight);
+    // 屏幕截图存在且展示截图数据的状态为true则进行绘制
+    if (imgData != null && plugInParameters.getShowScreenDataStatus()) {
+        // 调用者传了画布尺寸则使用，否则使用窗口宽高
+        if (canvasSize.canvasWidth !== 0 && canvasSize.canvasHeight !== 0) {
+            context.drawImage(imgData, 0, 0, canvasSize.canvasWidth, canvasSize.canvasHeight);
+        } else {
+            context.drawImage(imgData, 0, 0, maxWidth, maxHeight);
+        }
+    }
+    // 绘制蒙层
+    context.save();
+    const maskColor = data.getMaskColor();
+    context.fillStyle = "rgba(0, 0, 0, .6)";
+    if (maskColor) {
+        context.fillStyle = `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${maskColor.a})`;
+    }
+    if (canvasSize.canvasWidth !== 0 && canvasSize.canvasHeight !== 0) {
+        context.fillRect(0, 0, canvasSize.canvasWidth, canvasSize.canvasHeight);
+    } else {
+        context.fillRect(0, 0, maxWidth, maxHeight);
+    }
+    // 绘制结束
+    context.restore();
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawMosaic.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 绘制马赛克
+ *    实现思路：
+ *      1. 获取鼠标划过路径区域的图像信息
+ *      2. 将区域内的像素点绘制成周围相近的颜色
+ * @param mouseX 当前鼠标X轴坐标
+ * @param mouseY 当前鼠标Y轴坐标
+ * @param size 马赛克画笔大小
+ * @param degreeOfBlur 马赛克模糊度
+ * @param context 需要进行绘制的画布
+ */
+export declare function drawMosaic(mouseX: number, mouseY: number, size: number, degreeOfBlur: number, context: CanvasRenderingContext2D): void;

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawMosaic.js

@@ -0,0 +1,67 @@
+/**
+ * 获取图像指定坐标位置的颜色
+ * @param imgData 需要进行操作的图片
+ * @param x x点坐标
+ * @param y y点坐标
+ */ const getAxisColor = (imgData, x, y)=>{
+    const w = imgData.width;
+    const d = imgData.data;
+    const color = [];
+    color[0] = d[4 * (y * w + x)];
+    color[1] = d[4 * (y * w + x) + 1];
+    color[2] = d[4 * (y * w + x) + 2];
+    color[3] = d[4 * (y * w + x) + 3];
+    return color;
+};
+/**
+ * 设置图像指定坐标位置的颜色
+ * @param imgData 需要进行操作的图片
+ * @param x x点坐标
+ * @param y y点坐标
+ * @param color 颜色数组
+ */ const setAxisColor = (imgData, x, y, color)=>{
+    const w = imgData.width;
+    const d = imgData.data;
+    d[4 * (y * w + x)] = color[0];
+    d[4 * (y * w + x) + 1] = color[1];
+    d[4 * (y * w + x) + 2] = color[2];
+    d[4 * (y * w + x) + 3] = color[3];
+};
+/**
+ * 绘制马赛克
+ *    实现思路：
+ *      1. 获取鼠标划过路径区域的图像信息
+ *      2. 将区域内的像素点绘制成周围相近的颜色
+ * @param mouseX 当前鼠标X轴坐标
+ * @param mouseY 当前鼠标Y轴坐标
+ * @param size 马赛克画笔大小
+ * @param degreeOfBlur 马赛克模糊度
+ * @param context 需要进行绘制的画布
+ */ export function drawMosaic(mouseX, mouseY, size, degreeOfBlur, context) {
+    // 获取设备像素比
+    const dpr = window.devicePixelRatio || 1;
+    // 获取鼠标经过区域的图片像素信息
+    const imgData = context.getImageData(mouseX * dpr, mouseY * dpr, size * dpr, size * dpr);
+    // 获取图像宽高
+    const w = imgData.width;
+    const h = imgData.height;
+    // 等分图像宽高
+    const stepW = w / degreeOfBlur;
+    const stepH = h / degreeOfBlur;
+    // 循环画布像素点
+    for(let i = 0; i < stepH; i++){
+        for(let j = 0; j < stepW; j++){
+            // 随机获取一个小方格的随机颜色
+            const color = getAxisColor(imgData, j * degreeOfBlur + Math.floor(Math.random() * degreeOfBlur), i * degreeOfBlur + Math.floor(Math.random() * degreeOfBlur));
+            // 循环小方格的像素点
+            for(let k = 0; k < degreeOfBlur; k++){
+                for(let l = 0; l < degreeOfBlur; l++){
+                    // 设置小方格的颜色
+                    setAxisColor(imgData, j * degreeOfBlur + l, i * degreeOfBlur + k, color);
+                }
+            }
+        }
+    }
+    // 渲染打上马赛克后的图像信息
+    context.putImageData(imgData, mouseX * dpr, mouseY * dpr);
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawPencil.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 画笔绘制
+ * @param context
+ * @param mouseX
+ * @param mouseY
+ * @param size
+ * @param color
+ */
+export declare function drawPencil(context: CanvasRenderingContext2D, mouseX: number, mouseY: number, size: number, color: string): void;
+/**
+ * 画笔初始化
+ */
+export declare function initPencil(context: CanvasRenderingContext2D, mouseX: number, mouseY: number): void;

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawPencil.js

@@ -0,0 +1,27 @@
+/**
+ * 画笔绘制
+ * @param context
+ * @param mouseX
+ * @param mouseY
+ * @param size
+ * @param color
+ */ export function drawPencil(context, mouseX, mouseY, size, color) {
+    // 开始绘制
+    context.save();
+    // 设置边框大小
+    context.lineWidth = size;
+    // 设置边框颜色
+    context.strokeStyle = color;
+    context.lineTo(mouseX, mouseY);
+    context.stroke();
+    // 绘制结束
+    context.restore();
+}
+/**
+ * 画笔初始化
+ */ export function initPencil(context, mouseX, mouseY) {
+    // 开始||清空一条路径
+    context.beginPath();
+    // 移动画笔位置
+    context.moveTo(mouseX, mouseY);
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawRectangle.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 绘制矩形
+ * @param mouseX
+ * @param mouseY
+ * @param width
+ * @param height
+ * @param color 边框颜色
+ * @param borderWidth 边框大小
+ * @param context 需要进行绘制的canvas画布
+ */
+export declare function drawRectangle(mouseX: number, mouseY: number, width: number, height: number, color: string, borderWidth: number, context: CanvasRenderingContext2D): void;

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawRectangle.js

@@ -0,0 +1,22 @@
+/**
+ * 绘制矩形
+ * @param mouseX
+ * @param mouseY
+ * @param width
+ * @param height
+ * @param color 边框颜色
+ * @param borderWidth 边框大小
+ * @param context 需要进行绘制的canvas画布
+ */ export function drawRectangle(mouseX, mouseY, width, height, color, borderWidth, context) {
+    context.save();
+    // 设置边框颜色
+    context.strokeStyle = color;
+    // 设置边框大小
+    context.lineWidth = borderWidth;
+    context.beginPath();
+    // 绘制矩形
+    context.rect(mouseX, mouseY, width, height);
+    context.stroke();
+    // 绘制结束
+    context.restore();
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawText.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 绘制文本
+ * @param text 需要进行绘制的文字
+ * @param mouseX 绘制位置的X轴坐标
+ * @param mouseY 绘制位置的Y轴坐标
+ * @param color 字体颜色
+ * @param fontSize 字体大小
+ * @param context 需要你行绘制的画布
+ */
+export declare function drawText(text: string, mouseX: number, mouseY: number, color: string, fontSize: number, context: CanvasRenderingContext2D): void;

package/es2017/customerService/js-screen-shot/lib/split-methods/DrawText.js

@@ -0,0 +1,24 @@
+/**
+ * 绘制文本
+ * @param text 需要进行绘制的文字
+ * @param mouseX 绘制位置的X轴坐标
+ * @param mouseY 绘制位置的Y轴坐标
+ * @param color 字体颜色
+ * @param fontSize 字体大小
+ * @param context 需要你行绘制的画布
+ */ export function drawText(text, mouseX, mouseY, color, fontSize, context) {
+    context.save();
+    context.lineWidth = 1;
+    context.fillStyle = color;
+    context.textBaseline = "middle";
+    context.font = `bold ${fontSize}px none`;
+    // 处理换行符并绘制多行文本
+    const lines = text.split("\n"); // 根据换行符拆分文本为多行
+    const lineHeight = fontSize * 1.4; // 设定行高为字体大小的1.4倍
+    lines.forEach((line, index)=>{
+        // 调整每行的垂直位置
+        const lineY = mouseY + lineHeight * index;
+        context.fillText(line, mouseX, lineY);
+    });
+    context.restore();
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/KeyboardEventHandle.d.ts

@@ -0,0 +1,10 @@
+export default class KeyboardEventHandle {
+    private readonly toolController;
+    constructor(screenShotController: HTMLCanvasElement, toolController: HTMLDivElement);
+    /**
+     * 触发工具栏指定模块的点击事件
+     * @param eventName 事件名, 与截图工具栏中的data-title属性值保持一致
+     * @private
+     */
+    triggerEvent(eventName: string): void;
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/KeyboardEventHandle.js

@@ -0,0 +1,50 @@
+// 键盘按下事件处理类
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import InitData from "../main-entrance/InitData";
+class KeyboardEventHandle {
+    /**
+   * 触发工具栏指定模块的点击事件
+   * @param eventName 事件名, 与截图工具栏中的data-title属性值保持一致
+   * @private
+   */ triggerEvent(eventName) {
+        if (this.toolController == null) return;
+        for(let i = 0; i < this.toolController.childNodes.length; i++){
+            const childNode = this.toolController.childNodes[i];
+            const toolName = childNode.getAttribute("data-title");
+            if (toolName === eventName) {
+                // 执行参数事件
+                childNode.click();
+            }
+        }
+    }
+    constructor(screenShotController, toolController){
+        // 截图工具栏容器
+        _define_property(this, "toolController", null);
+        const data = new InitData();
+        const textInputContainer = document.getElementById("textInputPanel");
+        this.toolController = toolController;
+        // 调整截图容器显示权重
+        screenShotController.tabIndex = 9999;
+        // 监听全局键盘按下事件
+        document.body.addEventListener("keydown", (event)=>{
+            // 文本输入框存在时则终止
+            if (data.getTextEditState()) {
+                data.setTextEditState(false);
+                return;
+            }
+            if (event.code === "Escape") {
+                // ESC按下，触发取消截图事件
+                this.triggerEvent("close");
+            }
+            if (event.code === "Enter" && textInputContainer && textInputContainer.style.display !== "block") {
+                // Enter按下，触发确认截图事件
+                this.triggerEvent("confirm");
+            }
+            // 按下command+z或者ctrl+z快捷键选中撤销工具
+            if ((event.metaKey || event.ctrlKey) && event.code === "KeyZ") {
+                this.triggerEvent("undo");
+            }
+        });
+    }
+}
+export { KeyboardEventHandle as default };

package/es2017/customerService/js-screen-shot/lib/split-methods/SetPlugInParameters.d.ts

@@ -0,0 +1,2 @@
+import { screenShotType } from "../type/ComponentType";
+export declare function setPlugInParameters(options: screenShotType): void;

package/es2017/customerService/js-screen-shot/lib/split-methods/SetPlugInParameters.js

@@ -0,0 +1,61 @@
+import PlugInParameters from "../main-entrance/PlugInParameters";
+// 为插件的全局参数设置数据
+export function setPlugInParameters(options) {
+    const plugInParameters = new PlugInParameters();
+    // webrtc启用状态, 默认为true，如果设置了false则修改默认值
+    if ((options === null || options === void 0 ? void 0 : options.enableWebRtc) === false) {
+        plugInParameters.setWebRtcStatus(false);
+        plugInParameters.setInitStatus(false);
+    }
+    // 读取并设置参数中的视频流数据
+    if ((options === null || options === void 0 ? void 0 : options.screenFlow) instanceof MediaStream) {
+        plugInParameters.setScreenFlow(options.screenFlow);
+    }
+    // 读取参数中的画布宽高, 两者都存在时才设置
+    if ((options === null || options === void 0 ? void 0 : options.canvasWidth) && (options === null || options === void 0 ? void 0 : options.canvasHeight)) {
+        plugInParameters.setCanvasSize(options.canvasWidth, options.canvasHeight);
+    }
+    // 读取参数设置默认展示截屏数据的状态，默认为false，如果设置了true才修改
+    if ((options === null || options === void 0 ? void 0 : options.showScreenData) === true) {
+        plugInParameters.setShowScreenDataStatus(true);
+    }
+    if ((options === null || options === void 0 ? void 0 : options.maskColor) && typeof options.maskColor === "object") {
+        plugInParameters.setMaskColor(options.maskColor);
+    }
+    // 调用者关闭了剪切板写入，则修改全局变量（默认为true）
+    if ((options === null || options === void 0 ? void 0 : options.writeBase64) === false) {
+        plugInParameters.setWriteImgState(options.writeBase64);
+    }
+    // 调用者传入了截图dom
+    if (options === null || options === void 0 ? void 0 : options.screenShotDom) {
+        plugInParameters.setScreenShotDom(options.screenShotDom);
+    }
+    // 调用者传入了裁剪区域边框像素点颜色信息
+    if (options === null || options === void 0 ? void 0 : options.cutBoxBdColor) {
+        plugInParameters.setCutBoxBdColor(options.cutBoxBdColor);
+    }
+    // 调用者传入了保存截图回调
+    if (options === null || options === void 0 ? void 0 : options.saveCallback) {
+        plugInParameters.setSaveCallback(options.saveCallback);
+    }
+    // 设置最大撤销次数
+    if (options === null || options === void 0 ? void 0 : options.maxUndoNum) {
+        plugInParameters.setMaxUndoNum(options.maxUndoNum);
+    }
+    // 箭头绘制工具是否使用等比例绘制方式
+    if (options === null || options === void 0 ? void 0 : options.useRatioArrow) {
+        plugInParameters.setRatioArrow(options.useRatioArrow);
+    }
+    // 设置图片自适应开启状态
+    if (options === null || options === void 0 ? void 0 : options.imgAutoFit) {
+        plugInParameters.setImgAutoFit(options.imgAutoFit);
+    }
+    // 设置图片保存时的文件名称
+    if (options === null || options === void 0 ? void 0 : options.saveImgTitle) {
+        plugInParameters.setSaveImgTitle(options.saveImgTitle);
+    }
+    // 确认截图时，是否需要销毁dom
+    if ((options === null || options === void 0 ? void 0 : options.destroyContainer) === false) {
+        plugInParameters.setDestroyContainerState(options.destroyContainer);
+    }
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/ToolClickEvent.d.ts

@@ -0,0 +1 @@
+export declare function toolClickEvent(toolName: string, index: number, mouseEvent: any, completeCallback: Function | undefined, closeCallback: Function | undefined): void;

package/es2017/customerService/js-screen-shot/lib/split-methods/ToolClickEvent.js

@@ -0,0 +1,132 @@
+/**
+ * 裁剪框工具栏点击事件
+ * @param toolName
+ * @param index
+ * @param mouseEvent
+ */ import { setSelectedClassName } from "../common-methods/SetSelectedClassName";
+import { calculateOptionIcoPosition } from "./CalculateOptionIcoPosition";
+import InitData from "../main-entrance/InitData";
+import { getCanvasImgData } from "../common-methods/GetCanvasImgData";
+import { takeOutHistory } from "../common-methods/TakeOutHistory";
+import { drawCutOutBox } from "./DrawCutOutBox";
+import { drawText } from "./DrawText";
+import { addHistory } from "./AddHistoryData";
+import PlugInParameters from "../main-entrance/PlugInParameters";
+export function toolClickEvent(toolName, index, mouseEvent, completeCallback, closeCallback) {
+    const data = new InitData();
+    const plugInParameters = new PlugInParameters();
+    const textInputController = data.getTextInputController();
+    const screenShotController = data.getScreenShotContainer();
+    const ScreenShotImageController = data.getScreenShotImageController();
+    data.setActiveToolName(toolName);
+    if (screenShotController == null || ScreenShotImageController == null) return;
+    // 获取canvas容器
+    const screenShotCanvas = screenShotController.getContext("2d");
+    // 工具栏尚未点击，当前属于首次点击，重新绘制一个无像素点的裁剪框
+    if (!data.getToolClickStatus()) {
+        var _data_getToolPosition, _data_getToolPosition1;
+        const leftValue = ((_data_getToolPosition = data.getToolPosition()) === null || _data_getToolPosition === void 0 ? void 0 : _data_getToolPosition.left) || 0;
+        const topValue = ((_data_getToolPosition1 = data.getToolPosition()) === null || _data_getToolPosition1 === void 0 ? void 0 : _data_getToolPosition1.top) || 0;
+        // 工具栏位置超出时，对其进行修正处理
+        if (topValue && data.getToolPositionStatus()) {
+            // 调整工具栏位置
+            data.setToolInfo(leftValue, topValue - 46);
+        }
+        // data.setToolStatus(true);
+        // 获取裁剪框位置信息
+        const cutBoxPosition = data.getCutOutBoxPosition();
+        // 开始绘制无像素点裁剪框
+        drawCutOutBox(cutBoxPosition.startX, cutBoxPosition.startY, cutBoxPosition.width, cutBoxPosition.height, screenShotCanvas, data.getBorderSize(), screenShotController, ScreenShotImageController, false);
+    }
+    // 更新当前点击的工具栏条目
+    data.setToolName(toolName);
+    // 为当前点击项添加选中时的class名
+    setSelectedClassName(mouseEvent, index, false);
+    if (toolName === "text") {
+        var // 颜色选择容器添加布局兼容样式
+        _data_getColorSelectPanel;
+        // 显示文字选择容器
+        data.setTextSizePanelStatus(true);
+        // 隐藏画笔尺寸选择容器
+        data.setBrushSelectionStatus(false);
+        (_data_getColorSelectPanel = data.getColorSelectPanel()) === null || _data_getColorSelectPanel === void 0 ? void 0 : _data_getColorSelectPanel.classList.add("text-select-status");
+    } else {
+        // 隐藏下拉选择框
+        data.setTextSizePanelStatus(false);
+        // 显示画笔尺寸选择容器
+        data.setBrushSelectionStatus(true);
+    }
+    // 显示选项面板
+    data.setOptionStatus(true);
+    // 设置选项面板位置
+    data.setOptionPosition(calculateOptionIcoPosition(index));
+    data.setRightPanel(true);
+    if (toolName == "mosaicPen") {
+        // 马赛克工具隐藏右侧颜色面板与角标
+        data.setRightPanel(false);
+        data.hiddenOptionIcoStatus();
+    }
+    // 清空文本输入区域的内容并隐藏文本输入框
+    if (textInputController != null && data.getTextStatus() || textInputController != null && toolName !== "text") {
+        const text = textInputController.innerText;
+        if (text && text !== "") {
+            const { positionX , positionY , color , size  } = data.getTextInfo();
+            drawText(text, positionX, positionY, color, size, screenShotCanvas);
+            // 添加历史记录
+            addHistory();
+        }
+        textInputController.innerHTML = "";
+        data.setTextStatus(false);
+    }
+    // 初始化点击状态
+    data.setDragging(false);
+    data.setDraggingTrim(false);
+    // 保存图片
+    if (toolName == "save") {
+        getCanvasImgData(true);
+        const callback = plugInParameters.getSaveCallback();
+        if (callback) {
+            callback(0, "保存成功");
+        }
+        // 销毁组件
+        data.destroyDOM();
+        data.setInitStatus(true);
+    }
+    // 销毁组件
+    if (toolName == "close") {
+        // 触发关闭回调函数
+        if (closeCallback) {
+            closeCallback();
+        }
+        data.destroyDOM();
+        data.setInitStatus(true);
+    }
+    // 确认截图
+    if (toolName == "confirm") {
+        const base64 = getCanvasImgData(false);
+        // 触发回调函数，截图数据回传给插件调用者
+        if (completeCallback) {
+            completeCallback({
+                base64,
+                cutInfo: data.getCutOutBoxPosition()
+            });
+        }
+        if (!plugInParameters.getDestroyContainerState()) {
+            // 隐藏工具栏
+            // data.setToolStatus(false);
+            // data.setOptionStatus(false);
+            return;
+        }
+        // 销毁组件
+        data.destroyDOM();
+        data.setInitStatus(true);
+    }
+    // 撤销
+    if (toolName == "undo") {
+        // 隐藏画笔选项工具栏
+        data.setOptionStatus(false);
+        takeOutHistory();
+    }
+    // 设置裁剪框工具栏为点击状态
+    data.setToolClickStatus(true);
+}

package/es2017/customerService/js-screen-shot/lib/split-methods/drawCrossImg.d.ts

@@ -0,0 +1 @@
+export declare function drawCrossImg(html: Document): Promise<string[]>;

package/es2017/customerService/js-screen-shot/lib/split-methods/drawCrossImg.js

@@ -0,0 +1,32 @@
+export function drawCrossImg(html) {
+    const promises = [];
+    const imageNodes = html.querySelectorAll("img");
+    imageNodes.forEach((element)=>{
+        const href = element.getAttribute("src");
+        if (!href) return;
+        if (href && href.startsWith("base64")) return;
+        const promise = new Promise((resolve, reject)=>{
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            img.src = `${href}&time=${+new Date().getTime()}`;
+            img.onload = function() {
+                const width = element.width;
+                const height = element.height;
+                const canvas = document.createElement("canvas");
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0, width, height);
+                const base64 = canvas === null || canvas === void 0 ? void 0 : canvas.toDataURL();
+                element.setAttribute("src", base64);
+                resolve("转换成功");
+            };
+            img.onerror = reject;
+            if (href !== null) {
+                img.src = href;
+            }
+        });
+        promises.push(promise);
+    });
+    return Promise.all(promises);
+}