zhibo/node_modules/ele-admin/es/ele-cropper/index.js

import Cropper from "cropperjs";
import { LicenseMixin, UNAUTHORIZED_TIP } from "../utils/license-util";
import CropperPreview from "./components/cropper-preview";
import CropperTools from "./components/cropper-tools";
import props from "./props";
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
  if (render2) {
    options.render = render2;
    options.staticRenderFns = staticRenderFns;
    options._compiled = true;
  }
  if (functionalTemplate) {
    options.functional = true;
  }
  if (scopeId) {
    options._scopeId = "data-v-" + scopeId;
  }
  var hook;
  if (moduleIdentifier) {
    hook = function(context) {
      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
        context = __VUE_SSR_CONTEXT__;
      }
      if (injectStyles) {
        injectStyles.call(this, context);
      }
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier);
      }
    };
    options._ssrRegister = hook;
  } else if (injectStyles) {
    hook = shadowMode ? function() {
      injectStyles.call(
        this,
        (options.functional ? this.parent : this).$root.$options.shadowRoot
      );
    } : injectStyles;
  }
  if (hook) {
    if (options.functional) {
      options._injectStyles = hook;
      var originalRender = options.render;
      options.render = function renderWithStyleInjection(h, context) {
        hook.call(context);
        return originalRender(h, context);
      };
    } else {
      var existing = options.beforeCreate;
      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
    }
  }
  return {
    exports: scriptExports,
    options
  };
}
const _sfc_main = {
  name: "EleCropper",
  components: { CropperPreview, CropperTools },
  mixins: [LicenseMixin],
  props,
  inject: {
    proLayout: {
      default: null
    }
  },
  emits: ["crop"],
  data() {
    return {
      ins: null,
      imgType: this.imageType,
      scaleXValue: -1,
      scaleYValue: -1
    };
  },
  computed: {
    styleResponsive() {
      var _a, _b;
      const proLayout = (_a = this.proLayout) != null ? _a : {};
      return (_b = proLayout.styleResponsive) != null ? _b : true;
    }
  },
  mounted() {
    if (this.src) {
      this.render();
    }
  },
  methods: {
    render() {
      var _a;
      this.destroy();
      const options = {
        aspectRatio: this.aspectRatio,
        viewMode: this.viewMode,
        dragMode: this.dragMode,
        initialAspectRatio: this.initialAspectRatio,
        minContainerWidth: this.minContainerWidth,
        minContainerHeight: this.minContainerHeight,
        minCanvasWidth: this.minCanvasWidth,
        minCanvasHeight: this.minCanvasHeight,
        minCropBoxWidth: this.minCropBoxWidth,
        minCropBoxHeight: this.minCropBoxHeight,
        ...this.options
      };
      if (this.showPreview) {
        options.preview = (_a = this.$refs.previewRef) == null ? void 0 : _a.getPreviews();
      }
      if (this.$refs.imageRef) {
        this.ins = new Cropper(this.$refs.imageRef, options);
      }
    },
    zoomIn() {
      this.ins && this.ins.zoom(0.1);
    },
    zoomOut() {
      this.ins && this.ins.zoom(-0.1);
    },
    moveL() {
      this.ins && this.ins.move(-10, 0);
    },
    moveR() {
      this.ins && this.ins.move(10, 0);
    },
    moveT() {
      this.ins && this.ins.move(0, -10);
    },
    moveB() {
      this.ins && this.ins.move(0, 10);
    },
    rotateL() {
      this.ins && this.ins.rotate(-45);
    },
    rotateR() {
      this.ins && this.ins.rotate(45);
    },
    scaleX() {
      this.ins && this.ins.scaleX(this.scaleXValue);
      this.scaleXValue = -this.scaleXValue;
    },
    scaleY() {
      this.ins && this.ins.scaleY(this.scaleYValue);
      this.scaleYValue = -this.scaleYValue;
    },
    reset() {
      this.ins && this.ins.reset();
    },
    crop() {
      var _a;
      if (!this.authenticated) {
        console.warn(UNAUTHORIZED_TIP);
        return;
      }
      const result = (_a = this.ins) == null ? void 0 : _a.getCroppedCanvas({
        width: this.croppedWidth,
        height: this.croppedHeight,
        minWidth: this.croppedMinWidth,
        minHeight: this.croppedMinHeight,
        maxWidth: this.croppedMaxWidth,
        maxHeight: this.croppedMaxHeight,
        fillColor: this.croppedFillColor,
        imageSmoothingEnabled: this.imageSmoothingEnabled,
        imageSmoothingQuality: this.imageSmoothingQuality,
        ...this.croppedOptions
      });
      if (result) {
        if (this.toBlob) {
          result.toBlob((blob) => {
            this.$emit("crop", blob);
          }, this.imgType);
        } else {
          this.$emit("crop", result.toDataURL(this.imgType));
        }
      } else {
        this.$emit("crop");
      }
    },
    replace({ data, type }) {
      this.imgType = type;
      if (this.ins) {
        this.ins.replace(data);
      } else {
        const elem = this.$refs.imageRef;
        if (elem) {
          elem.src = data;
          elem.style.display = "block";
        }
        this.render();
      }
    },
    destroy() {
      this.ins && this.ins.destroy();
      this.ins = null;
    }
  },
  watch: {
    src(value) {
      if (value) {
        if (this.ins) {
          this.ins.replace(value);
        } else {
          this.$nextTick(() => {
            this.render();
          });
        }
      } else {
        this.destroy();
      }
    },
    imageType(value) {
      if (value) {
        this.imgType = value;
      }
    }
  },
  unmounted() {
    this.destroy();
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("div", { class: ["ele-cropper", { "ele-cropper-responsive": _vm.styleResponsive }] }, [_c("div", { staticClass: "ele-cropper-group" }, [_c("div", { staticClass: "ele-cropper-img-group" }, [_c("img", { ref: "imageRef", style: { maxWidth: "100%", display: _vm.src ? "block" : "none" }, attrs: { "src": _vm.src, "alt": "cropper" } })]), _vm.showPreview ? _c("CropperPreview", { ref: "previewRef", attrs: { "aspect-ratio": _vm.aspectRatio, "preview-width": _vm.previewWidth } }) : _vm._e()], 1), _c("CropperTools", { attrs: { "tools": _vm.tools, "ok-text": _vm.okText }, on: { "crop": _vm.crop, "move-b": _vm.moveB, "move-l": _vm.moveL, "move-r": _vm.moveR, "move-t": _vm.moveT, "reset": _vm.reset, "rotate-l": _vm.rotateL, "rotate-r": _vm.rotateR, "scale-x": _vm.scaleX, "scale-y": _vm.scaleY, "replace": _vm.replace, "zoom-in": _vm.zoomIn, "zoom-out": _vm.zoomOut } })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  null,
  null,
  null
);
const index = __component__.exports;
export {
  index as default
};