@xysfe/actui2 0.0.1

package/lib/Signature/index.mjs

@@ -0,0 +1,1058 @@
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js/instance/for-each";
+import _parseFloat from "@babel/runtime-corejs3/core-js/parse-float";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import { c as create } from "../utils/create/index.mjs";
+import { n as normalizeComponent } from "../common/index.mjs";
+import './style.css';function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof _Symbol && _getIteratorMethod(r) || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+      t && (r = t);
+      var _n = 0, F = function F2() {
+      };
+      return { s: F, n: function n() {
+        return _n >= r.length ? { done: true } : { done: false, value: r[_n++] };
+      }, e: function e2(r2) {
+        throw r2;
+      }, f: F };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o, a = true, u = false;
+  return { s: function s() {
+    t = t.call(r);
+  }, n: function n() {
+    var r2 = t.next();
+    return a = r2.done, r2;
+  }, e: function e2(r2) {
+    u = true, o = r2;
+  }, f: function f() {
+    try {
+      a || null == t.return || t.return();
+    } finally {
+      if (u) throw o;
+    }
+  } };
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    var _context4;
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = _sliceInstanceProperty(_context4 = {}.toString.call(r)).call(_context4, 8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? _Array$from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+var landscapeFontSizeArr = [{
+  minHeight: 750,
+  fontSize: 20
+}, {
+  minHeight: 720,
+  fontSize: 19.2
+}, {
+  minHeight: 640,
+  fontSize: 17.06666666666667
+}, {
+  minHeight: 540,
+  fontSize: 14.4
+}, {
+  minHeight: 480,
+  fontSize: 12.8
+}, {
+  minHeight: 414,
+  fontSize: 11.04
+}, {
+  minHeight: 384,
+  fontSize: 10.24
+}, {
+  minHeight: 375,
+  fontSize: 10
+}, {
+  minHeight: 360,
+  fontSize: 9.6
+}, {
+  minHeight: 320,
+  fontSize: 8.533333333333333
+}];
+var portraitFontSizeArr = [{
+  minWidth: 750,
+  fontSize: 20
+}, {
+  minWidth: 720,
+  fontSize: 19.2
+}, {
+  minWidth: 640,
+  fontSize: 17.06666666666667
+}, {
+  minWidth: 540,
+  fontSize: 14.4
+}, {
+  minWidth: 480,
+  fontSize: 12.8
+}, {
+  minWidth: 414,
+  fontSize: 11.04
+}, {
+  minWidth: 384,
+  fontSize: 10.24
+}, {
+  minWidth: 375,
+  fontSize: 10
+}, {
+  minWidth: 360,
+  fontSize: 9.6
+}, {
+  minWidth: 320,
+  fontSize: 8.533333333333333
+}];
+var _sfc_main = {
+  name: "ActSignature",
+  props: {
+    color: {
+      //可能传过来的是渐变色
+      type: String,
+      default: "#8c7fee"
+    },
+    backBtnColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    clearBtnColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    clearBtnText: {
+      type: String,
+      default: "重置"
+    },
+    backBtnText: {
+      type: String,
+      default: "返回"
+    },
+    saveBtnText: {
+      type: String,
+      default: "保存"
+    },
+    headerText: {
+      type: String,
+      default: "请完成您的亲笔签名"
+    },
+    // 是否添加水印
+    isWatermark: {
+      type: Boolean,
+      default: false
+    },
+    // 水印内容
+    watermarkText: {
+      type: String,
+      default: ""
+    },
+    watermarkTextColor: {
+      type: String,
+      default: "#DEE1ED"
+    },
+    // 是否横屏
+    isHorizontalScreen: {
+      type: Boolean,
+      default: false
+    },
+    // 是否全屏
+    isFullScreen: {
+      type: Boolean,
+      default: false
+    },
+    bgColor: {
+      type: String,
+      default: "#f9f9f9"
+    },
+    canvasBgColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    title: {
+      type: String,
+      default: "请完成签名"
+    },
+    lineWidth: {
+      type: Number,
+      default: 3
+    },
+    lineColor: {
+      type: String,
+      default: "#000000"
+    },
+    identity: {
+      type: String,
+      default: "申请人"
+    },
+    signatureTip: {
+      type: String,
+      default: "请正楷签署您的姓名,避免错别字或过于潦草导致无法律效力"
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    scene: {
+      type: String,
+      default: "dialog"
+    },
+    previewInfo: {
+      type: Object,
+      default: null
+    },
+    imgBgColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data: function data() {
+    return {
+      isVisible: false,
+      showErrtips: false,
+      isCrop: false,
+      // 是否裁剪
+      hasDrew: false,
+      width: 0,
+      height: 0,
+      resultImg: "",
+      points: {
+        x: [],
+        y: []
+      },
+      canvasTxt: null,
+      startX: 0,
+      startY: 0,
+      isDrawing: false,
+      sratio: 1,
+      portraitHeight: 0,
+      //竖屏时的高度
+      portraitWidth: 0,
+      //竖屏时的宽度
+      isPortrait: true,
+      signatureCanvasRect: {},
+      paths: [],
+      originFontSize: "",
+      //原始fontSize
+      originIsPortrait: true
+      //展开时是否横竖屏
+    };
+  },
+  computed: {
+    ratio: function ratio() {
+      return this.height / this.width;
+    },
+    stageInfo: function stageInfo() {
+      return this.$refs.signatureCanvas.getBoundingClientRect();
+    },
+    myBg: function myBg() {
+      return this.canvasBgColor ? this.canvasBgColor : "rgba(255, 255, 255, 0)";
+    },
+    signIdentityText: function signIdentityText() {
+      var _context;
+      return _concatInstanceProperty(_context = "".concat(this.identity)).call(_context, this.watermarkText, "亲笔签名");
+    },
+    isHorizontalClass: function isHorizontalClass() {
+      return {
+        "act-signature-horizontal-box": true,
+        "rotate": this.isPortrait,
+        "portrait": this.isPortrait,
+        "landscape": !this.isPortrait,
+        "safe-area": !this.isPortrait
+      };
+    }
+  },
+  watch: {
+    myBg: function myBg2(newVal) {
+    },
+    isVisible: function isVisible(newVal) {
+      if (newVal) {
+        this.$emit("show");
+        if (this.isHorizontalScreen) {
+          this.getOriginFontSizeAndPortrait();
+          this.setRootFontSize();
+        }
+        if (this.previewInfo) {
+          if (this.isWatermark) {
+            this.initWatermarkCanvas();
+          }
+        } else {
+          this.initSignatureCanvas();
+          if (this.isWatermark) {
+            this.initWatermarkCanvas();
+          }
+        }
+      }
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+    document.onmouseup = function() {
+      _this.isDrawing = false;
+    };
+    if (this.isHorizontalScreen) {
+      var that = this;
+      this.directionDetect();
+      this.getOriginFontSizeAndPortrait();
+      this.calculateViewportUnits();
+      window.addEventListener("resize", that.initResize);
+    }
+  },
+  beforeDestroy: function beforeDestroy() {
+    if (this.isHorizontalScreen) {
+      window.removeEventListener("resize", this.initResize);
+      this.clearRootFontSize();
+    }
+  },
+  methods: {
+    initResize: function initResize() {
+      var _this2 = this;
+      this.directionDetect();
+      setTimeout(function() {
+        _this2.calculateViewportUnits();
+        if (!_this2.isVisible) {
+          return;
+        }
+        _this2.setRootFontSize();
+        if (_this2.previewInfo) {
+          if (_this2.isWatermark) {
+            _this2.initWatermarkCanvas();
+          }
+        } else {
+          _this2.$nextTick(function() {
+            _this2.initSignatureCanvas();
+            if (_this2.isWatermark) {
+              _this2.initWatermarkCanvas();
+            }
+          });
+        }
+      }, 300);
+    },
+    calculateViewportUnits: function calculateViewportUnits() {
+      var _this3 = this;
+      this.$nextTick(function() {
+        var height = document.documentElement.clientHeight || document.body.clientHeight;
+        var width = document.documentElement.clientWidth || document.body.clientWidth;
+        if (_this3.isPortrait) {
+          _this3.$refs.signatureHorizontalWrap.style.height = width + "px";
+          _this3.$refs.signatureHorizontalWrap.style.width = height + "px";
+        } else {
+          _this3.$refs.signatureHorizontalWrap.style.height = height + "px";
+          _this3.$refs.signatureHorizontalWrap.style.width = width + "px";
+        }
+        if (_this3.isHorizontalScreen && !_this3.isPortrait) {
+          if (_this3.portraitHeight && _this3.portraitWidth) {
+            _this3.$refs.signatureContent.style.height = _this3.portraitHeight + "px";
+            _this3.$refs.signatureContent.style.width = _this3.portraitWidth + "px";
+          }
+          var signatureWrap = _this3.$refs.signatureHorizontalWrap;
+          signatureWrap.scrollTop = signatureWrap.scrollHeight;
+        }
+      });
+    },
+    directionDetect: function directionDetect() {
+      var portrait = window.matchMedia("(orientation: portrait)").matches;
+      this.isPortrait = portrait;
+    },
+    setRootFontSize: function setRootFontSize() {
+      var _this4 = this;
+      var htmlEle = window.document.documentElement || document.getElementsByTagName("html")[0];
+      var fontSizeMapping = !this.isPortrait ? landscapeFontSizeArr : portraitFontSizeArr;
+      var height = document.documentElement.clientHeight || document.body.clientHeight;
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      var matchedSize = _findInstanceProperty(fontSizeMapping).call(fontSizeMapping, function(item) {
+        if (_this4.isPortrait) {
+          return width >= item.minWidth;
+        } else {
+          return height >= item.minHeight;
+        }
+      });
+      var fontSize = matchedSize ? matchedSize.fontSize : "10";
+      htmlEle.style.fontSize = fontSize + "px";
+    },
+    getFontBold: function getFontBold(index) {
+      return index > this.identity.length - 1 && this.watermarkText.length + this.identity.length > index;
+    },
+    initSignatureCanvas: function initSignatureCanvas() {
+      var _this5 = this;
+      setTimeout(function() {
+        var signatureCanvas = _this5.$refs.signatureCanvas;
+        if (!signatureCanvas) {
+          return;
+        }
+        _this5.signatureCtx = signatureCanvas.getContext("2d");
+        _this5.height = _this5.$refs.box.offsetHeight;
+        _this5.width = _this5.$refs.box.offsetWidth;
+        signatureCanvas.height = _this5.height;
+        signatureCanvas.width = _this5.width;
+        if (!_this5.isWatermark) {
+          signatureCanvas.style.background = _this5.myBg;
+        }
+        _this5._signatureResize();
+        if (_this5.isHorizontalScreen && _this5.isPortrait) {
+          if (!_this5.portraitHeight && !_this5.portraitWidth) {
+            var signatureContentElement = _this5.$refs.signatureContent;
+            _this5.portraitWidth = signatureContentElement.offsetWidth;
+            _this5.portraitHeight = signatureContentElement.offsetHeight;
+          }
+        }
+      });
+    },
+    initWatermarkCanvas: function initWatermarkCanvas() {
+      var _this6 = this;
+      setTimeout(function() {
+        var watermarkCanvas = _this6.$refs.watermarkCanvas;
+        if (!watermarkCanvas) {
+          return;
+        }
+        _this6.watermarkCtx = watermarkCanvas.getContext("2d");
+        watermarkCanvas.height = _this6.$refs.box.offsetHeight;
+        if (!_this6.height) {
+          _this6.height = _this6.$refs.box.offsetHeight;
+        }
+        watermarkCanvas.width = _this6.$refs.box.offsetWidth;
+        if (!_this6.width) {
+          _this6.width = _this6.$refs.box.offsetWidth;
+        }
+        watermarkCanvas.style.background = _this6.myBg;
+        _this6._watermarResize();
+        _this6.drawWatermark(_this6.watermarkCtx);
+      });
+    },
+    isChineseOrEnglish: function isChineseOrEnglish(str) {
+      var chineseRegex = /^[\u4e00-\u9fa5]+$/;
+      var size = 120;
+      var reduce = 3;
+      if (this.isHorizontalScreen) {
+        if (chineseRegex.test(str)) {
+          reduce = 4;
+        } else {
+          reduce = 10;
+        }
+      } else {
+        reduce = 3;
+      }
+      if (str.length > 4 && str.length - reduce > 0) {
+        size = 120 - (str.length - reduce) * 10;
+      }
+      return size;
+    },
+    drawWatermark: function drawWatermark(ctx) {
+      var _this7 = this;
+      ctx.fillStyle = this.watermarkTextColor;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      var name = this.watermarkText;
+      var fontSize = this.isChineseOrEnglish(name);
+      ctx.font = "".concat(fontSize, "px serif");
+      ctx.clearRect(0, 0, this.width, this.height);
+      var nameChars = name.split("");
+      var charHeight = fontSize;
+      var totalHeight = nameChars.length * charHeight;
+      var startY = (this.height - totalHeight + charHeight) / 2;
+      if (this.isHorizontalScreen) {
+        var centerX = this.width / 2;
+        var centerY = this.height / 2;
+        ctx.translate(centerX, centerY);
+        ctx.fillText(name, 0, 0);
+      } else {
+        _forEachInstanceProperty(nameChars).call(nameChars, function(char, index) {
+          var x = _this7.width / 2;
+          var y = startY + index * charHeight;
+          ctx.fillText(char, x, y);
+        });
+      }
+    },
+    show: function show() {
+      this.isVisible = true;
+    },
+    hide: function hide() {
+      this.reset();
+      if (this.isHorizontalScreen) {
+        this.clearRootFontSize();
+      }
+      this.isVisible = false;
+    },
+    getOriginFontSizeAndPortrait: function getOriginFontSizeAndPortrait() {
+      var htmlEle = window.document.documentElement || document.getElementsByTagName("html")[0];
+      this.originFontSize = htmlEle.style.fontSize;
+      this.originIsPortrait = this.isPortrait;
+    },
+    clearRootFontSize: function clearRootFontSize() {
+      var htmlEle = window.document.documentElement || document.getElementsByTagName("html")[0];
+      htmlEle.style.fontSize = this.originFontSize || "";
+      if (this.originFontSize && this.originIsPortrait !== this.isPortrait) {
+        var myEvent = new Event("resize");
+        window.dispatchEvent(myEvent);
+      }
+    },
+    _watermarResize: function _watermarResize() {
+      var watermarkCanvas = this.$refs.watermarkCanvas;
+      watermarkCanvas.style.width = this.width + "px";
+      var realw = _parseFloat(window.getComputedStyle(watermarkCanvas).width);
+      watermarkCanvas.style.height = this.ratio * realw + "px";
+      this.watermarkCtx = watermarkCanvas.getContext("2d");
+      this.watermarkCtx.scale(1 * this.sratio, 1 * this.sratio);
+      this.sratio = realw / this.width;
+      this.watermarkCtx.scale(1 / this.sratio, 1 / this.sratio);
+    },
+    _signatureResize: function _signatureResize() {
+      var signatureCanvas = this.$refs.signatureCanvas;
+      signatureCanvas.style.width = this.width + "px";
+      var realw = _parseFloat(window.getComputedStyle(signatureCanvas).width);
+      signatureCanvas.style.height = this.ratio * realw + "px";
+      this.signatureCtx = signatureCanvas.getContext("2d");
+      this.signatureCtx.scale(1 * this.sratio, 1 * this.sratio);
+      this.sratio = realw / this.width;
+      this.signatureCtx.scale(1 / this.sratio, 1 / this.sratio);
+      this.recordDraw();
+    },
+    recordDraw: function recordDraw() {
+      var _this8 = this;
+      this.$nextTick(function() {
+        if (_this8.isHorizontalScreen && _this8.paths.length) {
+          var ctx = _this8.signatureCtx;
+          var lineColor = _this8.lineColor, lineWidth = _this8.lineWidth, sratio = _this8.sratio;
+          var startX = _this8.paths[0].x;
+          var startY = _this8.paths[0].y;
+          _this8.$nextTick(function() {
+            ctx.clearRect(0, 0, _this8.canvasWidth, _this8.canvasHeight);
+            ctx.beginPath();
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = lineWidth * sratio;
+            ctx.lineCap = "round";
+            ctx.lineJoin = "round";
+            ctx.moveTo(startX, startY);
+            var _iterator = _createForOfIteratorHelper(_this8.paths), _step;
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done; ) {
+                var point = _step.value;
+                if (point.start) {
+                  ctx.moveTo(point.x, point.y);
+                }
+                ctx.lineTo(point.x, point.y);
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+            ctx.stroke();
+            ctx.closePath();
+          });
+        }
+      });
+    },
+    // pc
+    mouseDown: function mouseDown(e) {
+      e = e || event;
+      e.preventDefault();
+      this.isDrawing = true;
+      this.hasDrew = true;
+      var obj = {
+        x: e.offsetX,
+        y: e.offsetY
+      };
+      this.drawStart(obj);
+    },
+    mouseMove: function mouseMove(e) {
+      e = e || event;
+      e.preventDefault();
+      if (this.isDrawing) {
+        var obj = {
+          x: e.offsetX,
+          y: e.offsetY
+        };
+        this.drawMove(obj);
+      }
+    },
+    mouseUp: function mouseUp(e) {
+      e = e || event;
+      e.preventDefault();
+      var obj = {
+        x: e.offsetX,
+        y: e.offsetY
+      };
+      this.drawEnd(obj);
+      this.isDrawing = false;
+    },
+    // mobile
+    getAdjustedCoordinates: function getAdjustedCoordinates(e) {
+      var canvasHeight = this.$refs.signatureCanvas.height;
+      var rect = this.signatureCanvasRect;
+      var touch = e.targetTouches[0] || {};
+      var clientX = touch.clientX - rect.left;
+      var clientY = touch.clientY - rect.top;
+      var x = 0;
+      var y = 0;
+      if (this.isHorizontalScreen && this.isPortrait) {
+        var offsetX = clientY;
+        var offsetY = canvasHeight - clientX;
+        x = offsetX;
+        y = offsetY;
+      } else {
+        x = clientX;
+        y = clientY;
+      }
+      return {
+        x,
+        y
+      };
+    },
+    touchStart: function touchStart(e) {
+      e = e || event;
+      e.preventDefault();
+      this.hasDrew = true;
+      this.signatureCanvasRect = this.$refs.signatureCanvas.getBoundingClientRect();
+      if (e.touches.length === 1) {
+        var obj = this.getAdjustedCoordinates(e);
+        this.drawStart(obj);
+      }
+    },
+    touchMove: function touchMove(e) {
+      e = e || event;
+      e.preventDefault();
+      if (e.touches.length === 1) {
+        var obj = this.getAdjustedCoordinates(e);
+        this.drawMove(obj);
+      }
+    },
+    touchEnd: function touchEnd(e) {
+      e = e || event;
+      e.preventDefault();
+      if (e.touches.length === 1) {
+        var obj = this.getAdjustedCoordinates(e);
+        this.drawEnd(obj);
+      }
+    },
+    // 绘制
+    drawStart: function drawStart(obj) {
+      this.startX = obj.x;
+      this.startY = obj.y;
+      this.signatureCtx.beginPath();
+      this.signatureCtx.moveTo(this.startX, this.startY);
+      this.signatureCtx.lineTo(obj.x, obj.y);
+      this.signatureCtx.lineCap = "round";
+      this.signatureCtx.lineJoin = "round";
+      this.signatureCtx.lineWidth = this.lineWidth * this.sratio;
+      this.signatureCtx.stroke();
+      this.signatureCtx.closePath();
+      this.points.x.push(obj.x);
+      this.points.y.push(obj.y);
+      obj.start = true;
+      this.paths.push(obj);
+    },
+    drawMove: function drawMove(obj) {
+      this.signatureCtx.beginPath();
+      this.signatureCtx.moveTo(this.startX, this.startY);
+      this.signatureCtx.lineTo(obj.x, obj.y);
+      this.signatureCtx.strokeStyle = this.lineColor;
+      this.signatureCtx.lineWidth = this.lineWidth * this.sratio;
+      this.signatureCtx.lineCap = "round";
+      this.signatureCtx.lineJoin = "round";
+      this.signatureCtx.stroke();
+      this.signatureCtx.closePath();
+      this.startY = obj.y;
+      this.startX = obj.x;
+      this.points.x.push(obj.x);
+      this.points.y.push(obj.y);
+      this.paths.push(obj);
+    },
+    drawEnd: function drawEnd(obj) {
+      this.signatureCtx.beginPath();
+      this.signatureCtx.moveTo(this.startX, this.startY);
+      this.signatureCtx.lineTo(obj.x, obj.y);
+      this.signatureCtx.lineCap = "round";
+      this.signatureCtx.lineJoin = "round";
+      this.signatureCtx.stroke();
+      this.signatureCtx.closePath();
+      this.points.x.push(obj.x);
+      this.points.y.push(obj.y);
+      this.points.x.push(-1);
+      this.points.y.push(-1);
+      this.paths.push(obj);
+    },
+    // 操作
+    generate: function generate() {
+      var _this9 = this;
+      var pm = new _Promise(function(resolve, reject) {
+        var position = _this9.getMax(_this9.points.x, _this9.points.y);
+        if (!_this9.hasDrew) {
+          reject("Warning: Not Signned!");
+          return;
+        }
+        if (_this9.points.x.length < 40 || Math.abs(position.left - position.right) < 40 || Math.abs(position.top - position.bottom) < 40) {
+          reject("Warning: Not Signned!");
+          return;
+        }
+        var resImgData = _this9.signatureCtx.getImageData(0, 0, _this9.$refs.signatureCanvas.width, _this9.$refs.signatureCanvas.height);
+        _this9.signatureCtx.globalCompositeOperation = "destination-over";
+        _this9.signatureCtx.fillStyle = _this9.imgBgColor || _this9.myBg;
+        _this9.signatureCtx.fillRect(0, 0, _this9.$refs.signatureCanvas.width, _this9.$refs.signatureCanvas.height);
+        _this9.resultImg = _this9.$refs.signatureCanvas.toDataURL();
+        var resultImg = _this9.resultImg;
+        _this9.signatureCtx.clearRect(0, 0, _this9.$refs.signatureCanvas.width, _this9.$refs.signatureCanvas.height);
+        _this9.signatureCtx.putImageData(resImgData, 0, 0);
+        _this9.signatureCtx.globalCompositeOperation = "source-over";
+        if (_this9.isCrop) {
+          var _this9$signatureCtx;
+          var croparea = _this9.getCropArea(resImgData.data);
+          var cropcanvas = document.createElement("canvas");
+          var cropctx = cropcanvas.getContext("2d");
+          cropcanvas.width = croparea[2] - croparea[0];
+          cropcanvas.height = croparea[3] - croparea[1];
+          var cropimgData = (_this9$signatureCtx = _this9.signatureCtx).getImageData.apply(_this9$signatureCtx, _toConsumableArray(croparea));
+          cropctx.globalCompositeOperation = "destination-over";
+          cropctx.putImageData(cropimgData, 0, 0);
+          cropctx.fillStyle = _this9.imgBgColor || _this9.myBg;
+          cropctx.fillRect(0, 0, cropcanvas.width, cropcanvas.height);
+          resultImg = cropcanvas.toDataURL();
+          cropcanvas = null;
+        }
+        resolve(resultImg);
+      });
+      return pm;
+    },
+    reset: function reset() {
+      this.signatureCtx && this.signatureCtx.clearRect(0, 0, this.$refs.signatureCanvas.width, this.$refs.signatureCanvas.height);
+      this.$emit("update:bgColor", "");
+      this.points = {
+        x: [],
+        y: []
+      };
+      this.hasDrew = false;
+      this.resultImg = "";
+      this.paths = [];
+    },
+    goBack: function goBack() {
+      if (this.scene === "dialog") {
+        this.hide();
+      } else {
+        window.history.back();
+      }
+    },
+    getCropArea: function getCropArea(imgData) {
+      var topX = this.$refs.signatureCanvas.width;
+      var btmX = 0;
+      var topY = this.$refs.signatureCanvas.height;
+      var btnY = 0;
+      for (var i = 0; i < this.$refs.signatureCanvas.width; i++) {
+        for (var j = 0; j < this.$refs.signatureCanvas.height; j++) {
+          var pos = (i + this.$refs.signatureCanvas.width * j) * 4;
+          if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
+            btnY = Math.max(j, btnY);
+            btmX = Math.max(i, btmX);
+            topY = Math.min(j, topY);
+            topX = Math.min(i, topX);
+          }
+        }
+      }
+      topX++;
+      btmX++;
+      topY++;
+      btnY++;
+      var data2 = [topX, topY, btmX, btnY];
+      return data2;
+    },
+    getMax: function getMax(xPoints, yPoints) {
+      var obj = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      };
+      if ({}.toString.call(xPoints) !== "[object Array]" || {}.toString.call(yPoints) !== "[object Array]") {
+        return obj;
+      }
+      obj.left = Math.min.apply(null, xPoints);
+      obj.right = Math.max.apply(null, xPoints);
+      obj.top = Math.min.apply(null, yPoints);
+      obj.bottom = Math.max.apply(null, yPoints);
+      return obj;
+    },
+    save: function save() {
+      var _this0 = this;
+      if (!this.hasDrew) return;
+      this.generate().then(function(res) {
+        _this0.$emit("complete", res);
+        if (_this0.scene === "dialog") {
+          _this0.hide();
+        } else {
+          _this0.reset();
+        }
+      }).catch(function(err) {
+        _this0.showErrtips = true;
+        setTimeout(function() {
+          _this0.showErrtips = false;
+        }, 2e3);
+      });
+    },
+    previewSave: function previewSave() {
+      if (!this.previewInfo || !this.previewInfo.signImg) return;
+      this.$emit("complete", this.previewInfo.signImg);
+      if (this.scene === "dialog") {
+        this.hide();
+      } else {
+        this.reset();
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("transition", {
+    attrs: {
+      "name": "act-gold-popup-move"
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isVisible,
+      expression: "isVisible"
+    }],
+    staticClass: "act-signature-wrap",
+    class: _vm.isHorizontalScreen ? "act-signature-horizontal-wrap-bg" : "",
+    attrs: {
+      "id": "act-signature"
+    }
+  }, [!_vm.isHorizontalScreen ? _c("div", {
+    staticClass: "act-signature-box",
+    class: {
+      "isFullScreen": _vm.isFullScreen
+    },
+    style: "background-color: ".concat(_vm.bgColor, ";")
+  }, [_c("div", {
+    staticClass: "header-box",
+    style: "background: ".concat(_vm.bgColor)
+  }, [_c("div", {
+    staticClass: "text"
+  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _c("div", {
+    staticClass: "close",
+    on: {
+      "click": _vm.hide
+    }
+  })]), !_vm.$slots.header && _vm.headerText ? _c("div", {
+    staticClass: "header",
+    domProps: {
+      "innerHTML": _vm._s(_vm.headerText)
+    }
+  }) : _vm._e(), _vm.$slots.header ? _vm._t("header") : _vm._e(), _c("div", {
+    ref: "box",
+    staticClass: "canvasBox",
+    style: "height: calc(".concat(!_vm.$slots.header && _vm.headerText ? 88 : 96, "% - 100px);")
+  }, [_c("canvas", {
+    ref: "watermarkCanvas",
+    staticClass: "canvas-ins"
+  }), _c("canvas", {
+    ref: "signatureCanvas",
+    staticClass: "canvas-ins",
+    on: {
+      "mousedown": _vm.mouseDown,
+      "mousemove": _vm.mouseMove,
+      "mouseup": _vm.mouseUp,
+      "touchstart": _vm.touchStart,
+      "touchmove": _vm.touchMove,
+      "touchend": _vm.touchEnd
+    }
+  })]), _c("div", {
+    staticClass: "ctrl",
+    style: "background: ".concat(_vm.bgColor)
+  }, [_c("div", {
+    staticClass: "clearBtn",
+    style: "background: ".concat(_vm.clearBtnColor),
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.reset
+    }
+  }, [_vm._v(" " + _vm._s(_vm.clearBtnText) + " ")]), _c("div", {
+    staticClass: "saveBtn",
+    style: "background: ".concat(_vm.color),
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.save
+    }
+  }, [_vm._v(" " + _vm._s(_vm.saveBtnText) + " ")])]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showErrtips,
+      expression: "showErrtips"
+    }],
+    staticClass: "errtips"
+  }, [_vm._v(" 请仔细签名 ")])], 2) : _c("div", {
+    ref: "signatureHorizontalWrap",
+    class: _vm.isHorizontalClass,
+    style: "background-color: ".concat(_vm.bgColor, ";")
+  }, [_vm.previewInfo ? [_c("div", {
+    staticClass: "preview"
+  }, [_c("div", {
+    staticClass: "preview-content"
+  }, [!_vm.previewInfo.signImg ? _c("div", {
+    ref: "box",
+    staticClass: "preview-panel"
+  }, [_c("canvas", {
+    ref: "watermarkCanvas",
+    staticClass: "preview-canvas"
+  })]) : _c("div", {
+    staticClass: "preview-signImg"
+  }, [_c("img", {
+    attrs: {
+      "src": _vm.previewInfo.signImg,
+      "alt": ""
+    }
+  })])]), _c("div", {
+    staticClass: "preview-bottom"
+  }, [_c("div", {
+    staticClass: "preview-info"
+  }, [_c("div", {
+    staticClass: "preview-title"
+  }, _vm._l(_vm.signIdentityText, function(item, index) {
+    var _context2;
+    return _c("span", {
+      key: _concatInstanceProperty(_context2 = "".concat(item, "_")).call(_context2, index),
+      style: _vm.getFontBold(index) ? "font-weight: bold;color:#333" : ""
+    }, [_vm._v(" " + _vm._s(item) + " ")]);
+  }), 0), _vm.signatureTip ? _c("div", {
+    staticClass: "preview-tip"
+  }, [_c("span", [_vm._v(_vm._s(_vm.signatureTip))])]) : _vm._e()]), _c("div", {
+    staticClass: "preview-ctrl"
+  }, [_c("div", {
+    staticClass: "backBtn",
+    style: "background: ".concat(_vm.backBtnColor),
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.goBack
+    }
+  }, [_c("span", {
+    staticClass: "backBtnText"
+  }, [_vm._v(" " + _vm._s(_vm.backBtnText) + " ")])]), _c("div", {
+    staticClass: "saveBtn",
+    style: {
+      "background": _vm.color,
+      "opacity": _vm.previewInfo.signImg ? 1 : 0.5
+    },
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.previewSave
+    }
+  }, [_c("span", {
+    staticClass: "saveBtnText"
+  }, [_vm._v(" " + _vm._s(_vm.saveBtnText) + " ")])])])])])] : [_c("div", {
+    ref: "signatureContent",
+    staticClass: "act-signature-content"
+  }, [_c("div", {
+    staticClass: "content-top"
+  }, [_c("div", {
+    ref: "box",
+    staticClass: "canvasBox"
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.hasDrew,
+      expression: "hasDrew"
+    }],
+    staticClass: "clearBtn",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.reset
+    }
+  }, [_c("span", {
+    staticClass: "clearBtnText"
+  }, [_vm._v(" " + _vm._s(_vm.clearBtnText) + " ")])]), _c("canvas", {
+    ref: "watermarkCanvas",
+    staticClass: "canvas-ins"
+  }), _c("canvas", {
+    ref: "signatureCanvas",
+    staticClass: "canvas-ins",
+    on: {
+      "mousedown": _vm.mouseDown,
+      "mousemove": _vm.mouseMove,
+      "mouseup": _vm.mouseUp,
+      "touchstart": _vm.touchStart,
+      "touchmove": _vm.touchMove,
+      "touchend": _vm.touchEnd
+    }
+  })])]), _c("div", {
+    staticClass: "content-bottom"
+  }, [_c("div", {
+    staticClass: "signature-text"
+  }, [_c("div", {
+    staticClass: "signature-title"
+  }, _vm._l(_vm.signIdentityText, function(item, index) {
+    var _context3;
+    return _c("span", {
+      key: _concatInstanceProperty(_context3 = "".concat(item, "_")).call(_context3, index),
+      style: _vm.getFontBold(index) ? "font-weight: bold;color:#333" : ""
+    }, [_vm._v(" " + _vm._s(item) + " ")]);
+  }), 0), _vm.signatureTip ? _c("div", {
+    staticClass: "signature-tip"
+  }, [_c("span", [_vm._v(_vm._s(_vm.signatureTip))])]) : _vm._e()]), _c("div", {
+    staticClass: "ctrl"
+  }, [_c("div", {
+    staticClass: "backBtn",
+    style: "background: ".concat(_vm.backBtnColor),
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.goBack
+    }
+  }, [_c("span", {
+    staticClass: "backBtnText"
+  }, [_vm._v(" " + _vm._s(_vm.backBtnText) + " ")])]), _c("div", {
+    staticClass: "saveBtn",
+    style: {
+      "background": _vm.color,
+      "opacity": _vm.hasDrew ? 1 : 0.5
+    },
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.save
+    }
+  }, [_c("span", {
+    staticClass: "saveBtnText"
+  }, [_vm._v(" " + _vm._s(_vm.saveBtnText) + " ")])])])])]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showErrtips,
+      expression: "showErrtips"
+    }],
+    staticClass: "errtips"
+  }, [_c("span", [_vm._v(" 请仔细签名 ")])])]], 2)])]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "ed0146f6");
+var Signature = __component__.exports;
+Signature.install = function(Vue) {
+  Vue.component(Signature.name, Signature);
+  Vue.prototype["$createSignature"] = create(Signature, Vue);
+};
+export {
+  Signature as S
+};