bhd-components 0.9.1 → 0.9.2

package/es2017/customerService/js-screen-shot/lib/main-entrance/PlugInParameters.js

@@ -0,0 +1,162 @@
+let enableWebRtc = true;
+// electron环境下使用webrtc需要自己传入屏幕流
+let screenFlow = null;
+// 数据初始化标识
+let initStatus = false;
+// 画布宽高
+let canvasWidth = 0;
+let canvasHeight = 0;
+// 展示截屏图片至容器
+let showScreenData = false;
+let screenShotDom = null;
+let destroyContainer = true;
+// 蒙层颜色
+const maskColor = {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 0.6
+};
+let writeBase64 = true;
+let cutBoxBdColor = "#2CABFF";
+// 最大可撤销次数
+let maxUndoNum = 15;
+// 是否使用等比例箭头
+let useRatioArrow = false;
+// 开启图片自适应
+let imgAutoFit = false;
+let saveCallback = null;
+let saveImgTitle = null;
+class PlugInParameters {
+    // 设置数据初始化标识
+    setInitStatus(status) {
+        initStatus = status;
+    }
+    // 获取数据初始化标识
+    getInitStatus() {
+        return initStatus;
+    }
+    // 获取webrtc启用状态
+    getWebRtcStatus() {
+        return enableWebRtc;
+    }
+    // 设置webrtc启用状态
+    setWebRtcStatus(status) {
+        enableWebRtc = status;
+    }
+    setScreenShotDom(dom) {
+        screenShotDom = dom;
+    }
+    getCutBoxBdColor() {
+        return cutBoxBdColor;
+    }
+    setCutBoxBdColor(color) {
+        cutBoxBdColor = color;
+    }
+    getScreenShotDom() {
+        return screenShotDom;
+    }
+    // 获取屏幕流
+    getScreenFlow() {
+        return screenFlow;
+    }
+    // 设置屏幕流
+    setScreenFlow(stream) {
+        screenFlow = stream;
+    }
+    // 获取画布宽高
+    getCanvasSize() {
+        return {
+            canvasWidth: canvasWidth,
+            canvasHeight: canvasHeight
+        };
+    }
+    // 设置画布宽高
+    setCanvasSize(width, height) {
+        canvasWidth = width;
+        canvasHeight = height;
+    }
+    // 获取展示图片至容器的状态
+    getShowScreenDataStatus() {
+        return showScreenData;
+    }
+    // 设置展示图片至容器的状态
+    setShowScreenDataStatus(status) {
+        showScreenData = status;
+    }
+    // 设置蒙层颜色
+    setMaskColor(color) {
+        maskColor.r = color.r;
+        maskColor.g = color.g;
+        maskColor.b = color.b;
+        maskColor.a = color.a;
+    }
+    getMaskColor() {
+        return maskColor;
+    }
+    // 设置截图数据的写入状态
+    setWriteImgState(state) {
+        writeBase64 = state;
+    }
+    getWriteImgState() {
+        return writeBase64;
+    }
+    setSaveCallback(saveFn) {
+        saveCallback = saveFn;
+    }
+    getSaveCallback() {
+        return saveCallback;
+    }
+    setMaxUndoNum(num) {
+        maxUndoNum = num;
+    }
+    getMaxUndoNum() {
+        return maxUndoNum;
+    }
+    setRatioArrow(state) {
+        useRatioArrow = state;
+    }
+    getRatioArrow() {
+        return useRatioArrow;
+    }
+    setImgAutoFit(state) {
+        imgAutoFit = state;
+    }
+    getImgAutoFit() {
+        return imgAutoFit;
+    }
+    setSaveImgTitle(title) {
+        saveImgTitle = title;
+    }
+    getSaveImgTitle() {
+        return saveImgTitle;
+    }
+    setDestroyContainerState(state) {
+        destroyContainer = state;
+    }
+    getDestroyContainerState() {
+        return destroyContainer;
+    }
+    constructor(){
+        // 标识为true时则初始化数据
+        if (initStatus) {
+            enableWebRtc = true;
+            canvasWidth = 0;
+            canvasHeight = 0;
+            cutBoxBdColor = "#2CABFF";
+            showScreenData = false;
+            writeBase64 = true;
+            screenFlow = null;
+            // 初始化完成设置其值为false
+            initStatus = false;
+            screenShotDom = null;
+            saveCallback = null;
+            maxUndoNum = 15;
+            useRatioArrow = false;
+            imgAutoFit = false;
+            saveImgTitle = null;
+            destroyContainer = true;
+        }
+    }
+}
+export { PlugInParameters as default };

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

@@ -0,0 +1 @@
+export declare function addHistory(): void;

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

@@ -0,0 +1,23 @@
+import InitData from "../main-entrance/InitData";
+import PlugInParameters from "../main-entrance/PlugInParameters";
+// 保存当前画布状态
+export function addHistory() {
+    const data = new InitData();
+    const plugInParameters = new PlugInParameters();
+    const screenShotController = data.getScreenShotContainer();
+    if (screenShotController == null) return;
+    // 获取canvas容器
+    // 获取canvas画布与容器
+    const context = screenShotController.getContext("2d");
+    const controller = screenShotController;
+    if (data.getHistory().length > plugInParameters.getMaxUndoNum()) {
+        // 删除最早的一条画布记录
+        data.shiftHistory();
+    }
+    // 保存当前画布状态
+    data.pushHistory({
+        data: context.getImageData(0, 0, controller.width, controller.height)
+    });
+    // 启用撤销按钮
+    data.setUndoStatus(true);
+}

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

@@ -0,0 +1,8 @@
+import { positionInfoType } from "../type/ComponentType";
+/**
+ * 获取工具栏工具边界绘制状态
+ * @param startX x轴绘制起点
+ * @param startY y轴绘制起点
+ * @param cutBoxPosition 裁剪框位置信息
+ */
+export declare function getDrawBoundaryStatus(startX: number, startY: number, cutBoxPosition: positionInfoType): boolean;

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

@@ -0,0 +1,13 @@
+/**
+ * 获取工具栏工具边界绘制状态
+ * @param startX x轴绘制起点
+ * @param startY y轴绘制起点
+ * @param cutBoxPosition 裁剪框位置信息
+ */ export function getDrawBoundaryStatus(startX, startY, cutBoxPosition) {
+    if (startX < cutBoxPosition.startX || startY < cutBoxPosition.startY || startX > cutBoxPosition.startX + cutBoxPosition.width || startY > cutBoxPosition.startY + cutBoxPosition.height) {
+        // 无法绘制
+        return false;
+    }
+    // 可以绘制
+    return true;
+}

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

@@ -0,0 +1,5 @@
+/**
+ * 计算截图工具栏画笔选项三角形角标位置
+ * @param index
+ */
+export declare function calculateOptionIcoPosition(index: number): number;

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

@@ -0,0 +1,21 @@
+/**
+ * 计算截图工具栏画笔选项三角形角标位置
+ * @param index
+ */ export function calculateOptionIcoPosition(index) {
+    switch(index){
+        case 1:
+            return 24 - 8;
+        case 2:
+            return 24 * 2 + 8;
+        case 3:
+            return 24 * 4 - 6;
+        case 4:
+            return 24 * 5 + 8;
+        case 5:
+            return 24 * 7 + 6;
+        case 6:
+            return 24 * 9 - 6;
+        default:
+            return 0;
+    }
+}

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

@@ -0,0 +1,16 @@
+import { positionInfoType, toolPositionValType } from "../type/ComponentType";
+/**
+ * 计算截图工具栏位置
+ * @param position 裁剪框位置信息
+ * @param toolWidth 截图工具栏宽度
+ * @param containerWidth 截图容器宽度
+ * @param placement 展示位置
+ * @param containerLocation 截图容器位置信息
+ */
+export declare function calculateToolLocation(position: positionInfoType, toolWidth: number, containerWidth: number, placement: toolPositionValType, containerLocation: {
+    top: number;
+    left: number;
+}): {
+    mouseX: number;
+    mouseY: number;
+};

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

@@ -0,0 +1,39 @@
+/**
+ * 计算截图工具栏位置
+ * @param position 裁剪框位置信息
+ * @param toolWidth 截图工具栏宽度
+ * @param containerWidth 截图容器宽度
+ * @param placement 展示位置
+ * @param containerLocation 截图容器位置信息
+ */ export function calculateToolLocation(position, toolWidth, containerWidth, placement, containerLocation) {
+    // 工具栏X轴坐标 = (裁剪框的宽度 - 工具栏的宽度) / 2 + (裁剪框距离左侧的距离 - 容器距离左侧的距离)
+    let mouseX = (position.width - toolWidth) / 2 + (position.startX - containerLocation.left);
+    // 左对齐
+    if (placement === "left") {
+        mouseX = position.startX;
+    }
+    // 右对齐
+    if (placement === "right") {
+        mouseX = position.startX + position.width - toolWidth;
+    }
+    // 工具栏超出画布左侧可视区域，进行位置修正
+    if (mouseX < 0) mouseX = 0;
+    // 计算工具栏在画布内的占用面积
+    const toolSize = mouseX + toolWidth;
+    // 工具栏超出画布右侧可视区域，进行位置修正
+    if (toolSize > containerWidth) {
+        mouseX = containerWidth - toolWidth;
+    }
+    // 工具栏Y轴坐标
+    let mouseY = position.startY + position.height + 10;
+    if (position.width < 0 && position.height < 0 || position.width > 0 && position.height < 0) {
+        // 从右下角或者左下角拖动时，工具条y轴的位置应该为position.startY + 10
+        mouseY = position.startY + 10;
+    }
+    // 需要减去容器本身距离顶部的距离
+    mouseY -= containerLocation.top;
+    return {
+        mouseX,
+        mouseY
+    };
+}

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

@@ -0,0 +1,31 @@
+export declare class DrawArrow {
+    private beginPoint;
+    private stopPoint;
+    private polygonVertex;
+    private angle;
+    private arrowInfo;
+    private size;
+    /**
+     * 绘制箭头
+     * @param ctx 需要进行绘制的画布
+     * @param originX 鼠标按下时的x轴坐标
+     * @param originY 鼠标按下式的y轴坐标
+     * @param x 当前鼠标x轴坐标
+     * @param y 当前鼠标y轴坐标
+     * @param color 箭头颜色
+     * @param size 箭头尺寸
+     */
+    draw(ctx: CanvasRenderingContext2D, originX: number, originY: number, x: number, y: number, color: string, size: number): void;
+    private arrowCord;
+    private getRadian;
+    private sideCord;
+    /**
+     * 设置箭头的相关绘制信息
+     * @param edgeLen 长度
+     * @param angle 角度
+     * @private
+     */
+    private setArrowInfo;
+    private dynArrowSize;
+    private drawArrow;
+}

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

@@ -0,0 +1,131 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+export class DrawArrow {
+    /**
+   * 绘制箭头
+   * @param ctx 需要进行绘制的画布
+   * @param originX 鼠标按下时的x轴坐标
+   * @param originY 鼠标按下式的y轴坐标
+   * @param x 当前鼠标x轴坐标
+   * @param y 当前鼠标y轴坐标
+   * @param color 箭头颜色
+   * @param size 箭头尺寸
+   */ draw(ctx, originX, originY, x, y, color, size) {
+        this.beginPoint.x = originX;
+        this.beginPoint.y = originY;
+        this.stopPoint.x = x;
+        this.stopPoint.y = y;
+        this.arrowCord(this.beginPoint, this.stopPoint);
+        this.sideCord();
+        this.drawArrow(ctx, color);
+        switch(size){
+            case 2:
+                this.size = 1;
+                break;
+            case 5:
+                this.size = 1.3;
+                break;
+            case 10:
+                this.size = 1.7;
+                break;
+            default:
+                this.size = 1;
+                break;
+        }
+    }
+    // 计算箭头底边两个点位置信息
+    arrowCord(beginPoint, stopPoint) {
+        this.polygonVertex[0] = beginPoint.x;
+        // 多边形的第一个顶点设为起点
+        this.polygonVertex[1] = beginPoint.y;
+        this.polygonVertex[6] = stopPoint.x;
+        // 第七个顶点设为终点
+        this.polygonVertex[7] = stopPoint.y;
+        // 计算夹角
+        this.getRadian(beginPoint, stopPoint);
+        // 使用三角函数计算出8、9顶点的坐标
+        this.polygonVertex[8] = stopPoint.x - this.arrowInfo.edgeLen * Math.cos(Math.PI / 180 * (this.angle + this.arrowInfo.angle));
+        this.polygonVertex[9] = stopPoint.y - this.arrowInfo.edgeLen * Math.sin(Math.PI / 180 * (this.angle + this.arrowInfo.angle));
+        // 使用三角函数计算出4、5顶点的坐标
+        this.polygonVertex[4] = stopPoint.x - this.arrowInfo.edgeLen * Math.cos(Math.PI / 180 * (this.angle - this.arrowInfo.angle));
+        this.polygonVertex[5] = stopPoint.y - this.arrowInfo.edgeLen * Math.sin(Math.PI / 180 * (this.angle - this.arrowInfo.angle));
+    }
+    // 计算两个点之间的夹角
+    getRadian(beginPoint, stopPoint) {
+        // 使用atan2算出夹角（弧度），并将其转换为角度值(弧度 / 180)
+        this.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
+        this.setArrowInfo(50 * this.size, 30 * this.size);
+        this.dynArrowSize();
+    }
+    // 计算另两个底边侧面点
+    sideCord() {
+        const midpoint = {
+            x: 0,
+            y: 0
+        };
+        midpoint.x = (this.polygonVertex[4] + this.polygonVertex[8]) / 2;
+        // 通过求出第5个顶点和第9个顶点的横纵坐标的平均值，得到多边形的中心点坐标，
+        midpoint.y = (this.polygonVertex[5] + this.polygonVertex[9]) / 2;
+        this.polygonVertex[2] = (this.polygonVertex[4] + midpoint.x) / 2;
+        this.polygonVertex[3] = (this.polygonVertex[5] + midpoint.y) / 2;
+        this.polygonVertex[10] = (this.polygonVertex[8] + midpoint.x) / 2;
+        this.polygonVertex[11] = (this.polygonVertex[9] + midpoint.y) / 2;
+    }
+    /**
+   * 设置箭头的相关绘制信息
+   * @param edgeLen 长度
+   * @param angle 角度
+   * @private
+   */ setArrowInfo(edgeLen, angle) {
+        this.arrowInfo.edgeLen = edgeLen;
+        this.arrowInfo.angle = angle;
+    }
+    // 计算箭头尺寸
+    dynArrowSize() {
+        const x = this.stopPoint.x - this.beginPoint.x;
+        const y = this.stopPoint.y - this.beginPoint.y;
+        // 计算两点之间的直线距离
+        const length = Math.sqrt(x ** 2 + y ** 2);
+        // 根据箭头始点和终点之间的距离自适应地调整箭头大小。
+        if (length < 50) {
+            this.arrowInfo.edgeLen = length / 2;
+        } else if (length < 250) {
+            this.arrowInfo.edgeLen /= 2;
+        } else if (length < 500) {
+            this.arrowInfo.edgeLen = this.arrowInfo.edgeLen * length / 500;
+        }
+    }
+    // 在画布上画出递增变粗的箭头
+    drawArrow(ctx, color) {
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(this.polygonVertex[0], this.polygonVertex[1]);
+        ctx.lineTo(this.polygonVertex[2], this.polygonVertex[3]);
+        ctx.lineTo(this.polygonVertex[4], this.polygonVertex[5]);
+        ctx.lineTo(this.polygonVertex[6], this.polygonVertex[7]);
+        ctx.lineTo(this.polygonVertex[8], this.polygonVertex[9]);
+        ctx.lineTo(this.polygonVertex[10], this.polygonVertex[11]);
+        ctx.closePath();
+        ctx.fill();
+    }
+    constructor(){
+        // 起始点与结束点
+        _define_property(this, "beginPoint", {
+            x: 0,
+            y: 0
+        });
+        _define_property(this, "stopPoint", {
+            x: 0,
+            y: 0
+        });
+        // 多边形的尺寸信息
+        _define_property(this, "polygonVertex", []);
+        // 起点与X轴之间的夹角角度值
+        _define_property(this, "angle", 0);
+        // 箭头信息
+        _define_property(this, "arrowInfo", {
+            edgeLen: 50,
+            angle: 30 // 箭头的头部角度
+        });
+        _define_property(this, "size", 1);
+    }
+}

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

@@ -0,0 +1,11 @@
+/**
+ * 绘制圆形
+ * @param context 需要进行绘制的画布
+ * @param mouseX 当前鼠标x轴坐标
+ * @param mouseY 当前鼠标y轴坐标
+ * @param mouseStartX 鼠标按下时的x轴坐标
+ * @param mouseStartY 鼠标按下时的y轴坐标
+ * @param borderWidth 边框宽度
+ * @param color 边框颜色
+ */
+export declare function drawCircle(context: CanvasRenderingContext2D, mouseX: number, mouseY: number, mouseStartX: number, mouseStartY: number, borderWidth: number, color: string): void;

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

@@ -0,0 +1,37 @@
+/**
+ * 绘制圆形
+ * @param context 需要进行绘制的画布
+ * @param mouseX 当前鼠标x轴坐标
+ * @param mouseY 当前鼠标y轴坐标
+ * @param mouseStartX 鼠标按下时的x轴坐标
+ * @param mouseStartY 鼠标按下时的y轴坐标
+ * @param borderWidth 边框宽度
+ * @param color 边框颜色
+ */ export function drawCircle(context, mouseX, mouseY, mouseStartX, mouseStartY, borderWidth, color) {
+    // 坐标边界处理，解决反向绘制椭圆时的报错问题
+    const startX = mouseX < mouseStartX ? mouseX : mouseStartX;
+    const startY = mouseY < mouseStartY ? mouseY : mouseStartY;
+    const endX = mouseX >= mouseStartX ? mouseX : mouseStartX;
+    const endY = mouseY >= mouseStartY ? mouseY : mouseStartY;
+    // 计算圆的半径
+    const radiusX = (endX - startX) * 0.5;
+    const radiusY = (endY - startY) * 0.5;
+    // 计算圆心的x、y坐标
+    const centerX = startX + radiusX;
+    const centerY = startY + radiusY;
+    // 开始绘制
+    context.save();
+    context.beginPath();
+    context.lineWidth = borderWidth;
+    context.strokeStyle = color;
+    if (typeof context.ellipse === "function") {
+        // 绘制圆，旋转角度与起始角度都为0，结束角度为2*PI
+        context.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+    } else {
+        throw "你的浏览器不支持ellipse，无法绘制椭圆";
+    }
+    context.stroke();
+    context.closePath();
+    // 结束绘制
+    context.restore();
+}

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

@@ -0,0 +1,19 @@
+/**
+ * 绘制裁剪框
+ * @param mouseX 鼠标x轴坐标
+ * @param mouseY 鼠标y轴坐标
+ * @param width 裁剪框宽度
+ * @param height 裁剪框高度
+ * @param context 需要进行绘制的canvas画布
+ * @param borderSize 边框节点直径
+ * @param controller 需要进行操作的canvas容器
+ * @param imageController 图片canvas容器
+ * @param drawBorders
+ * @private
+ */
+export declare function drawCutOutBox(mouseX: number, mouseY: number, width: number, height: number, context: CanvasRenderingContext2D, borderSize: number, controller: HTMLCanvasElement, imageController: HTMLCanvasElement, drawBorders?: boolean): {
+    startX: number;
+    startY: number;
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,118 @@
+import PlugInParameters from "../main-entrance/PlugInParameters";
+/**
+ * 绘制裁剪框
+ * @param mouseX 鼠标x轴坐标
+ * @param mouseY 鼠标y轴坐标
+ * @param width 裁剪框宽度
+ * @param height 裁剪框高度
+ * @param context 需要进行绘制的canvas画布
+ * @param borderSize 边框节点直径
+ * @param controller 需要进行操作的canvas容器
+ * @param imageController 图片canvas容器
+ * @param drawBorders
+ * @private
+ */ export function drawCutOutBox(mouseX, mouseY, width, height, context, borderSize, controller, imageController, drawBorders = true) {
+    // 获取画布宽高
+    const canvasWidth = controller === null || controller === void 0 ? void 0 : controller.width;
+    const canvasHeight = controller === null || controller === void 0 ? void 0 : controller.height;
+    const dpr = window.devicePixelRatio || 1;
+    const data = new PlugInParameters();
+    // 画布、图片不存在则return
+    if (!canvasWidth || !canvasHeight || !imageController || !controller) return;
+    // 清除画布
+    context.clearRect(0, 0, canvasWidth, canvasHeight);
+    width = width != 0 ? width : 5;
+    height = height != 0 ? height : 5;
+    // 绘制蒙层
+    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})`;
+    }
+    context.fillRect(0, 0, canvasWidth, canvasHeight);
+    // 将蒙层凿开
+    context.globalCompositeOperation = "source-atop";
+    // 裁剪选择框
+    context.clearRect(mouseX, mouseY, width, height);
+    // 绘制8个边框像素点并保存坐标信息以及事件参数
+    context.globalCompositeOperation = "source-over";
+    context.fillStyle = data.getCutBoxBdColor();
+    // 是否绘制裁剪框的8个像素点
+    if (drawBorders) {
+        // 像素点大小
+        const size = borderSize;
+        // 绘制像素点
+        context.fillRect(mouseX - size / 2, mouseY - size / 2, size, size);
+        context.fillRect(mouseX - size / 2 + width / 2, mouseY - size / 2, size, size);
+        context.fillRect(mouseX - size / 2 + width, mouseY - size / 2, size, size);
+        context.fillRect(mouseX - size / 2, mouseY - size / 2 + height / 2, size, size);
+        context.fillRect(mouseX - size / 2 + width, mouseY - size / 2 + height / 2, size, size);
+        context.fillRect(mouseX - size / 2, mouseY - size / 2 + height, size, size);
+        context.fillRect(mouseX - size / 2 + width / 2, mouseY - size / 2 + height, size, size);
+        context.fillRect(mouseX - size / 2 + width, mouseY - size / 2 + height, size, size);
+    }
+    // 绘制结束
+    context.restore();
+    // 使用drawImage将图片绘制到蒙层下方
+    context.save();
+    context.globalCompositeOperation = "destination-over";
+    // 图片尺寸使用canvas容器的css中的尺寸
+    let { imgWidth , imgHeight  } = {
+        imgWidth: parseInt(controller === null || controller === void 0 ? void 0 : controller.style.width),
+        imgHeight: parseInt(controller === null || controller === void 0 ? void 0 : controller.style.height)
+    };
+    // 用户有传入截图dom绘制时使用其dom的尺寸
+    const screenShotDom = data.getScreenShotDom();
+    if (screenShotDom != null) {
+        imgWidth = screenShotDom.clientWidth;
+        imgHeight = screenShotDom.clientHeight;
+    }
+    // 非webrtc模式、未开启图片自适应、未传入截图dom时，图片的宽高不做处理
+    if (!data.getWebRtcStatus() && !data.getImgAutoFit() && screenShotDom == null) {
+        imgWidth = imageController.width / dpr;
+        imgHeight = imageController.height / dpr;
+    }
+    context.drawImage(imageController, 0, 0, imgWidth, imgHeight);
+    context.restore();
+    // 返回裁剪框临时位置信息
+    if (width > 0 && height > 0) {
+        // 考虑左上往右下拉区域的情况
+        return {
+            startX: mouseX,
+            startY: mouseY,
+            width: width,
+            height: height
+        };
+    } else if (width < 0 && height < 0) {
+        // 考虑右下往左上拉区域的情况
+        return {
+            startX: mouseX + width,
+            startY: mouseY + height,
+            width: Math.abs(width),
+            height: Math.abs(height)
+        };
+    } else if (width > 0 && height < 0) {
+        // 考虑左下往右上拉区域的情况
+        return {
+            startX: mouseX,
+            startY: mouseY + height,
+            width: width,
+            height: Math.abs(height)
+        };
+    } else if (width < 0 && height > 0) {
+        // 考虑右上往左下拉区域的情况
+        return {
+            startX: mouseX + width,
+            startY: mouseY,
+            width: Math.abs(width),
+            height: height
+        };
+    }
+    return {
+        startX: mouseX,
+        startY: mouseY,
+        width: width,
+        height: height
+    };
+}

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

@@ -0,0 +1,13 @@
+/**
+ * 绘制箭头
+ * @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 declare function drawLineArrow(context: CanvasRenderingContext2D, mouseStartX: number, mouseStartY: number, mouseX: number, mouseY: number, theta: number, slashLength: number, borderWidth: number, color: string): void;