@robot-admin/naive-ui-components 0.3.0

package/dist/C_ImageCropper2.js

@@ -0,0 +1,723 @@
+import { t as C_Icon_default } from "./C_Icon2.js";
+import { t as export_helper_default } from "./export-helper.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
+import { NButton, NButtonGroup, NDivider, NModal, NSpace, NTooltip } from "naive-ui";
+import { VueCropper } from "vue-cropper";
+
+//#region src/components/C_ImageCropper/composables/useCropperCore.ts
+function useCropperCore(options = {}) {
+	const cropperRef = ref(null);
+	function rotateLeft() {
+		cropperRef.value?.rotateLeft();
+	}
+	function rotateRight() {
+		cropperRef.value?.rotateRight();
+	}
+	function rotate(angle) {
+		const steps = Math.round(angle / 90);
+		const fn = steps > 0 ? rotateRight : rotateLeft;
+		for (let i = 0; i < Math.abs(steps); i++) fn();
+	}
+	function zoom(scale) {
+		cropperRef.value?.changeScale(scale > 0 ? 1 : -1);
+	}
+	function flipX() {
+		const el = cropperRef.value?.$refs?.img;
+		if (!el) return;
+		const current = el.style.transform || "";
+		if (current.includes("scaleX(-1)")) el.style.transform = current.replace("scaleX(-1)", "scaleX(1)");
+		else el.style.transform = current.replace(/scaleX\([^)]*\)/, "") + " scaleX(-1)";
+	}
+	function flipY() {
+		const el = cropperRef.value?.$refs?.img;
+		if (!el) return;
+		const current = el.style.transform || "";
+		if (current.includes("scaleY(-1)")) el.style.transform = current.replace("scaleY(-1)", "scaleY(1)");
+		else el.style.transform = current.replace(/scaleY\([^)]*\)/, "") + " scaleY(-1)";
+	}
+	function reset() {
+		cropperRef.value?.refresh();
+	}
+	function constrainSize(w, h) {
+		let ow = w;
+		let oh = h;
+		const maxW = options.maxWidth?.value ?? 0;
+		const maxH = options.maxHeight?.value ?? 0;
+		if (maxW > 0 && ow > maxW) {
+			const ratio = maxW / ow;
+			ow = maxW;
+			oh = Math.round(oh * ratio);
+		}
+		if (maxH > 0 && oh > maxH) {
+			const ratio = maxH / oh;
+			oh = maxH;
+			ow = Math.round(ow * ratio);
+		}
+		return {
+			width: ow,
+			height: oh
+		};
+	}
+	function getCropResult() {
+		return new Promise((resolve, reject) => {
+			const cropper = cropperRef.value;
+			if (!cropper) return reject(/* @__PURE__ */ new Error("Cropper not initialized"));
+			const format = options.format?.value ?? "png";
+			const quality = options.quality?.value ?? .92;
+			const mime = format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+			cropper.getCropData((base64) => {
+				cropper.getCropBlob((blob) => {
+					const img = new Image();
+					img.onload = () => {
+						const { width, height } = constrainSize(img.width, img.height);
+						if (width !== img.width || height !== img.height) {
+							const canvas = document.createElement("canvas");
+							canvas.width = width;
+							canvas.height = height;
+							canvas.getContext("2d").drawImage(img, 0, 0, width, height);
+							const constrainedBase64 = canvas.toDataURL(mime, quality);
+							canvas.toBlob((constrainedBlob) => {
+								resolve({
+									base64: constrainedBase64,
+									blob: constrainedBlob,
+									width,
+									height,
+									format
+								});
+							}, mime, format === "png" ? void 0 : quality);
+						} else resolve({
+							base64,
+							blob,
+							width: img.width,
+							height: img.height,
+							format
+						});
+					};
+					img.onerror = () => reject(/* @__PURE__ */ new Error("Failed to load crop result"));
+					img.src = base64;
+				});
+			});
+		});
+	}
+	return {
+		cropperRef,
+		rotate,
+		rotateLeft,
+		rotateRight,
+		zoom,
+		flipX,
+		flipY,
+		reset,
+		getCropResult
+	};
+}
+
+//#endregion
+//#region src/components/C_ImageCropper/components/CropperToolbar.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = { class: "cropper-toolbar" };
+var CropperToolbar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CropperToolbar",
+	props: {
+		currentRatio: {},
+		ratioPresets: {}
+	},
+	emits: [
+		"ratio",
+		"rotate",
+		"flipX",
+		"flipY",
+		"zoom",
+		"reset"
+	],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [
+				createVNode(unref(NButtonGroup), { size: "small" }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.ratioPresets, (item) => {
+						return openBlock(), createBlock(unref(NButton), {
+							key: item.value,
+							type: _ctx.currentRatio === item.value ? "primary" : "default",
+							onClick: ($event) => _ctx.$emit("ratio", item.value)
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+							_: 2
+						}, 1032, ["type", "onClick"]);
+					}), 128))]),
+					_: 1
+				}),
+				createVNode(unref(NDivider), { vertical: "" }),
+				createVNode(unref(NTooltip), null, {
+					trigger: withCtx(() => [createVNode(unref(NButton), {
+						size: "small",
+						quaternary: "",
+						onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("rotate", -90))
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:rotate-left" })]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[7] || (_cache[7] = createTextVNode(" 逆时针旋转 90° ", -1))]),
+					_: 1,
+					__: [7]
+				}),
+				createVNode(unref(NTooltip), null, {
+					trigger: withCtx(() => [createVNode(unref(NButton), {
+						size: "small",
+						quaternary: "",
+						onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("rotate", 90))
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:rotate-right" })]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[8] || (_cache[8] = createTextVNode(" 顺时针旋转 90° ", -1))]),
+					_: 1,
+					__: [8]
+				}),
+				createVNode(unref(NDivider), { vertical: "" }),
+				createVNode(unref(NTooltip), null, {
+					trigger: withCtx(() => [createVNode(unref(NButton), {
+						size: "small",
+						quaternary: "",
+						onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("flipX"))
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:flip-horizontal" })]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[9] || (_cache[9] = createTextVNode(" 水平翻转 ", -1))]),
+					_: 1,
+					__: [9]
+				}),
+				createVNode(unref(NTooltip), null, {
+					trigger: withCtx(() => [createVNode(unref(NButton), {
+						size: "small",
+						quaternary: "",
+						onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("flipY"))
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:flip-vertical" })]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[10] || (_cache[10] = createTextVNode(" 垂直翻转 ", -1))]),
+					_: 1,
+					__: [10]
+				}),
+				createVNode(unref(NDivider), { vertical: "" }),
+				createVNode(unref(NTooltip), null, {
+					trigger: withCtx(() => [createVNode(unref(NButton), {
+						size: "small",
+						quaternary: "",
+						onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("zoom", .1))
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:magnify-plus-outline" })]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[11] || (_cache[11] = createTextVNode(" 放大 ", -1))]),
+					_: 1,
+					__: [11]
+				}),
+				createVNode(unref(NTooltip), null, {
+					trigger: withCtx(() => [createVNode(unref(NButton), {
+						size: "small",
+						quaternary: "",
+						onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("zoom", -.1))
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:magnify-minus-outline" })]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[12] || (_cache[12] = createTextVNode(" 缩小 ", -1))]),
+					_: 1,
+					__: [12]
+				}),
+				createVNode(unref(NDivider), { vertical: "" }),
+				createVNode(unref(NTooltip), null, {
+					trigger: withCtx(() => [createVNode(unref(NButton), {
+						size: "small",
+						quaternary: "",
+						onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("reset"))
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:refresh" })]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[13] || (_cache[13] = createTextVNode(" 重置 ", -1))]),
+					_: 1,
+					__: [13]
+				})
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_ImageCropper/components/CropperToolbar.vue
+var CropperToolbar_default = /* @__PURE__ */ export_helper_default(CropperToolbar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-499ffd01"]]);
+
+//#endregion
+//#region src/components/C_ImageCropper/components/CropperPreview.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = { class: "cropper-preview" };
+const _hoisted_2$1 = { class: "preview-label" };
+const _hoisted_3$1 = ["src"];
+const _hoisted_4$1 = {
+	key: 1,
+	class: "preview-empty"
+};
+const _hoisted_5$1 = { class: "preview-thumbs" };
+const _hoisted_6$1 = ["src"];
+const _hoisted_7$1 = { class: "preview-thumb__label" };
+var CropperPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CropperPreview",
+	props: {
+		previewData: {},
+		circular: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const mainBoxRef = ref(null);
+		const mainBoxWidth = ref(200);
+		const thumbSizes = [
+			{
+				label: "80px",
+				size: 80
+			},
+			{
+				label: "48px",
+				size: 48
+			},
+			{
+				label: "32px",
+				size: 32
+			}
+		];
+		const hasValidPreview = computed(() => {
+			const d = props.previewData;
+			return d && d.url && d.w > 0 && d.h > 0;
+		});
+		const mainViewportStyle = computed(() => {
+			if (!hasValidPreview.value) return {};
+			const { w } = props.previewData;
+			return {
+				zoom: mainBoxWidth.value / w,
+				overflow: "hidden"
+			};
+		});
+		function getThumbViewportStyle(size) {
+			if (!hasValidPreview.value) return {};
+			const { w } = props.previewData;
+			return {
+				zoom: size / w,
+				overflow: "hidden"
+			};
+		}
+		let resizeObserver = null;
+		onMounted(() => {
+			if (mainBoxRef.value) {
+				mainBoxWidth.value = mainBoxRef.value.clientWidth;
+				resizeObserver = new ResizeObserver((entries) => {
+					requestAnimationFrame(() => {
+						for (const entry of entries) mainBoxWidth.value = entry.contentRect.width;
+					});
+				});
+				resizeObserver.observe(mainBoxRef.value);
+			}
+		});
+		onBeforeUnmount(() => {
+			resizeObserver?.disconnect();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				createElementVNode("div", _hoisted_2$1, [createVNode(C_Icon_default, { name: "mdi:eye-outline" }), _cache[0] || (_cache[0] = createElementVNode("span", null, "裁剪预览", -1))]),
+				createElementVNode("div", {
+					ref_key: "mainBoxRef",
+					ref: mainBoxRef,
+					class: normalizeClass(["preview-main", { "preview-main--circular": _ctx.circular }])
+				}, [hasValidPreview.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "preview-main__viewport",
+					style: normalizeStyle(mainViewportStyle.value)
+				}, [createElementVNode("div", { style: normalizeStyle(_ctx.previewData.div) }, [createElementVNode("img", {
+					src: _ctx.previewData.url,
+					style: normalizeStyle(_ctx.previewData.img),
+					alt: "preview"
+				}, null, 12, _hoisted_3$1)], 4)], 4)) : (openBlock(), createElementBlock("div", _hoisted_4$1, [createVNode(C_Icon_default, {
+					name: "mdi:image-outline",
+					style: {
+						"font-size": "32px",
+						"opacity": "0.2"
+					}
+				})]))], 2),
+				createElementVNode("div", _hoisted_5$1, [(openBlock(), createElementBlock(Fragment, null, renderList(thumbSizes, (item) => {
+					return createElementVNode("div", {
+						key: item.label,
+						class: "preview-thumb"
+					}, [createElementVNode("div", {
+						class: normalizeClass(["preview-thumb__box", { "preview-thumb__box--circular": _ctx.circular }]),
+						style: normalizeStyle({
+							width: `${item.size}px`,
+							height: `${item.size}px`
+						})
+					}, [hasValidPreview.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "preview-thumb__viewport",
+						style: normalizeStyle(getThumbViewportStyle(item.size))
+					}, [createElementVNode("div", { style: normalizeStyle(_ctx.previewData.div) }, [createElementVNode("img", {
+						src: _ctx.previewData.url,
+						style: normalizeStyle(_ctx.previewData.img),
+						alt: "thumb"
+					}, null, 12, _hoisted_6$1)], 4)], 4)) : createCommentVNode("v-if", true)], 6), createElementVNode("span", _hoisted_7$1, toDisplayString(item.label), 1)]);
+				}), 64))])
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_ImageCropper/components/CropperPreview.vue
+var CropperPreview_default = /* @__PURE__ */ export_helper_default(CropperPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-cefefdc0"]]);
+
+//#endregion
+//#region src/components/C_ImageCropper/index.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "c-image-cropper__body" };
+const _hoisted_2 = { class: "c-image-cropper__workspace" };
+const _hoisted_3 = {
+	key: 1,
+	class: "c-image-cropper__placeholder"
+};
+const _hoisted_4 = {
+	key: 0,
+	class: "c-image-cropper__preview-panel"
+};
+const _hoisted_5 = {
+	key: 1,
+	class: "c-image-cropper"
+};
+const _hoisted_6 = { class: "c-image-cropper__body" };
+const _hoisted_7 = { class: "c-image-cropper__workspace" };
+const _hoisted_8 = {
+	key: 1,
+	class: "c-image-cropper__placeholder"
+};
+const _hoisted_9 = {
+	key: 0,
+	class: "c-image-cropper__preview-panel"
+};
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "C_ImageCropper",
+	__name: "index",
+	props: {
+		src: { default: "" },
+		aspectRatio: { default: 0 },
+		outputFormat: { default: "png" },
+		outputQuality: { default: .92 },
+		maxOutputWidth: { default: 0 },
+		maxOutputHeight: { default: 0 },
+		showPreview: {
+			type: Boolean,
+			default: true
+		},
+		showToolbar: {
+			type: Boolean,
+			default: true
+		},
+		circular: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		height: { default: "400px" },
+		modal: {
+			type: Boolean,
+			default: false
+		},
+		modalTitle: { default: "图片裁剪" }
+	},
+	emits: [
+		"crop",
+		"ready",
+		"error",
+		"confirm",
+		"cancel"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const imgSrc = ref(props.src);
+		const currentRatio = ref(props.aspectRatio);
+		const modalVisible = ref(false);
+		const exporting = ref(false);
+		const previewData = ref(null);
+		const inlineCropperRef = ref(null);
+		const modalCropperRef = ref(null);
+		const activeCropperRef = computed(() => props.modal ? modalCropperRef.value : inlineCropperRef.value);
+		const containerHeight = computed(() => typeof props.height === "number" ? `${props.height}px` : props.height);
+		const vueCropperOutputType = computed(() => {
+			return {
+				png: "png",
+				jpeg: "jpeg",
+				webp: "webp"
+			}[props.outputFormat] || "png";
+		});
+		const isFixed = computed(() => currentRatio.value > 0);
+		const fixedNumber = computed(() => {
+			if (currentRatio.value <= 0) return [1, 1];
+			if (currentRatio.value === 1) return [1, 1];
+			if (Math.abs(currentRatio.value - 16 / 9) < .01) return [16, 9];
+			if (Math.abs(currentRatio.value - 4 / 3) < .01) return [4, 3];
+			if (Math.abs(currentRatio.value - 3 / 2) < .01) return [3, 2];
+			return [Math.round(currentRatio.value * 100), 100];
+		});
+		const autoCropSize = computed(() => ({
+			width: 300,
+			height: currentRatio.value > 0 ? 300 / currentRatio.value : 200
+		}));
+		const ratioPresets = [
+			{
+				label: "自由",
+				value: 0
+			},
+			{
+				label: "1:1",
+				value: 1
+			},
+			{
+				label: "16:9",
+				value: 16 / 9
+			},
+			{
+				label: "4:3",
+				value: 4 / 3
+			},
+			{
+				label: "3:2",
+				value: 3 / 2
+			}
+		];
+		const core = useCropperCore({
+			format: computed(() => props.outputFormat),
+			quality: computed(() => props.outputQuality),
+			maxWidth: computed(() => props.maxOutputWidth),
+			maxHeight: computed(() => props.maxOutputHeight)
+		});
+		watch(activeCropperRef, (v) => {
+			core.cropperRef.value = v;
+		});
+		function handleRealTimePreview(data) {
+			previewData.value = data;
+		}
+		function onImgLoad(status) {
+			if (status === "success") emit("ready");
+		}
+		function rotate(angle) {
+			core.rotate(angle);
+		}
+		function handleRatio(v) {
+			currentRatio.value = v;
+		}
+		function handleReset() {
+			core.reset();
+		}
+		async function handleConfirm() {
+			exporting.value = true;
+			try {
+				const result = await core.getCropResult();
+				emit("confirm", result);
+				emit("crop", result);
+				modalVisible.value = false;
+			} finally {
+				exporting.value = false;
+			}
+		}
+		function handleCancel() {
+			modalVisible.value = false;
+			emit("cancel");
+		}
+		function loadFile(file) {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				imgSrc.value = e.target?.result;
+			};
+			reader.readAsDataURL(file);
+		}
+		watch(() => props.src, (v) => {
+			imgSrc.value = v;
+		});
+		watch(() => props.aspectRatio, (v) => {
+			currentRatio.value = v;
+		});
+		__expose({
+			getCropResult: core.getCropResult,
+			rotate: core.rotate,
+			zoom: core.zoom,
+			flipX: core.flipX,
+			flipY: core.flipY,
+			reset: core.reset,
+			setAspectRatio: (r) => {
+				currentRatio.value = r;
+			},
+			loadFile,
+			open: (src) => {
+				if (src) imgSrc.value = src;
+				modalVisible.value = true;
+			},
+			close: () => {
+				modalVisible.value = false;
+			}
+		});
+		return (_ctx, _cache) => {
+			return props.modal ? (openBlock(), createBlock(unref(NModal), {
+				key: 0,
+				show: modalVisible.value,
+				"onUpdate:show": _cache[0] || (_cache[0] = ($event) => modalVisible.value = $event),
+				preset: "card",
+				title: props.modalTitle || "图片裁剪",
+				style: { width: "860px" },
+				"mask-closable": false,
+				closable: true
+			}, {
+				footer: withCtx(() => [createVNode(unref(NSpace), { justify: "end" }, {
+					default: withCtx(() => [createVNode(unref(NButton), { onClick: handleCancel }, {
+						default: withCtx(() => _cache[2] || (_cache[2] = [createTextVNode("取消", -1)])),
+						_: 1,
+						__: [2]
+					}), createVNode(unref(NButton), {
+						type: "primary",
+						loading: exporting.value,
+						onClick: handleConfirm
+					}, {
+						default: withCtx(() => _cache[3] || (_cache[3] = [createTextVNode("确认裁剪", -1)])),
+						_: 1,
+						__: [3]
+					}, 8, ["loading"])]),
+					_: 1
+				})]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [props.showToolbar ? (openBlock(), createBlock(CropperToolbar_default, {
+					key: 0,
+					"current-ratio": currentRatio.value,
+					"ratio-presets": ratioPresets,
+					onRatio: handleRatio,
+					onRotate: rotate,
+					onFlipX: unref(core).flipX,
+					onFlipY: unref(core).flipY,
+					onZoom: unref(core).zoom,
+					onReset: handleReset
+				}, null, 8, [
+					"current-ratio",
+					"onFlipX",
+					"onFlipY",
+					"onZoom"
+				])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [createElementVNode("div", {
+					class: "c-image-cropper__canvas",
+					style: normalizeStyle({ height: containerHeight.value })
+				}, [imgSrc.value ? (openBlock(), createBlock(unref(VueCropper), {
+					key: 0,
+					ref_key: "modalCropperRef",
+					ref: modalCropperRef,
+					img: imgSrc.value,
+					"output-size": props.outputQuality,
+					"output-type": vueCropperOutputType.value,
+					"can-scale": false,
+					"auto-crop": true,
+					"auto-crop-width": autoCropSize.value.width,
+					"auto-crop-height": autoCropSize.value.height,
+					fixed: isFixed.value,
+					"fixed-number": fixedNumber.value,
+					"center-box": true,
+					info: true,
+					"info-true": true,
+					"can-move": true,
+					"can-move-box": true,
+					original: false,
+					high: true,
+					full: false,
+					mode: "contain",
+					onRealTime: handleRealTimePreview,
+					onImgLoad
+				}, null, 8, [
+					"img",
+					"output-size",
+					"output-type",
+					"auto-crop-width",
+					"auto-crop-height",
+					"fixed",
+					"fixed-number"
+				])) : (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(C_Icon_default, {
+					name: "mdi:image-plus-outline",
+					style: {
+						"font-size": "48px",
+						"opacity": "0.3"
+					}
+				}), _cache[1] || (_cache[1] = createElementVNode("span", null, "请选择图片", -1))]))], 4), props.showPreview && imgSrc.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(CropperPreview_default, {
+					"preview-data": previewData.value,
+					circular: props.circular
+				}, null, 8, ["preview-data", "circular"])])) : createCommentVNode("v-if", true)])])]),
+				_: 1
+			}, 8, ["show", "title"])) : (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [props.showToolbar ? (openBlock(), createBlock(CropperToolbar_default, {
+				key: 0,
+				"current-ratio": currentRatio.value,
+				"ratio-presets": ratioPresets,
+				onRatio: handleRatio,
+				onRotate: rotate,
+				onFlipX: unref(core).flipX,
+				onFlipY: unref(core).flipY,
+				onZoom: unref(core).zoom,
+				onReset: handleReset
+			}, null, 8, [
+				"current-ratio",
+				"onFlipX",
+				"onFlipY",
+				"onZoom"
+			])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_7, [createElementVNode("div", {
+				class: "c-image-cropper__canvas",
+				style: normalizeStyle({ height: containerHeight.value })
+			}, [imgSrc.value ? (openBlock(), createBlock(unref(VueCropper), {
+				key: 0,
+				ref_key: "inlineCropperRef",
+				ref: inlineCropperRef,
+				img: imgSrc.value,
+				"output-size": props.outputQuality,
+				"output-type": vueCropperOutputType.value,
+				"can-scale": false,
+				"auto-crop": true,
+				"auto-crop-width": autoCropSize.value.width,
+				"auto-crop-height": autoCropSize.value.height,
+				fixed: isFixed.value,
+				"fixed-number": fixedNumber.value,
+				"center-box": true,
+				info: true,
+				"info-true": true,
+				"can-move": true,
+				"can-move-box": true,
+				original: false,
+				high: true,
+				full: false,
+				mode: "contain",
+				onRealTime: handleRealTimePreview,
+				onImgLoad
+			}, null, 8, [
+				"img",
+				"output-size",
+				"output-type",
+				"auto-crop-width",
+				"auto-crop-height",
+				"fixed",
+				"fixed-number"
+			])) : (openBlock(), createElementBlock("div", _hoisted_8, [createVNode(C_Icon_default, {
+				name: "mdi:image-plus-outline",
+				style: {
+					"font-size": "48px",
+					"opacity": "0.3"
+				}
+			}), _cache[4] || (_cache[4] = createElementVNode("span", null, "请选择图片", -1))]))], 4), props.showPreview && imgSrc.value ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(CropperPreview_default, {
+				"preview-data": previewData.value,
+				circular: props.circular
+			}, null, 8, ["preview-data", "circular"])])) : createCommentVNode("v-if", true)])])]));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_ImageCropper/index.vue
+var C_ImageCropper_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-692ad231"]]);
+
+//#endregion
+export { useCropperCore as n, C_ImageCropper_default as t };
+//# sourceMappingURL=C_ImageCropper2.js.map