@gct-paas/core-web 0.1.4-dev.8 → 0.1.5-dev.0

package/es/modules/picture-cropper/src/CopperModal.vue_vue_type_script_setup_true_name_CropperModal_lang.mjs

@@ -0,0 +1,280 @@
+import { useModalInner } from "../../global-modal/src/hooks/useModal.mjs";
+import { BasicModal } from "../../global-modal/index.mjs";
+import Cropper_default from "./Cropper.vue.mjs";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, resolveComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { isFunction } from "lodash-es";
+import { dataURLtoBlob, t, useNamespace } from "@gct-paas/core";
+import { Space, Tooltip, Upload, message } from "ant-design-vue";
+import { ReloadOutlined } from "@ant-design/icons-vue";
+//#region src/modules/picture-cropper/src/CopperModal.vue?vue&type=script&setup=true&name=CropperModal&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "empty"
+};
+var _hoisted_2 = { class: "flex flex-col justify-center items-center" };
+var _hoisted_3 = ["title"];
+var _hoisted_4 = { class: "flex-col" };
+var _hoisted_5 = { class: "flex-col" };
+var _hoisted_6 = { class: "flex-col text-center" };
+var CopperModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CopperModal",
+	props: {
+		circled: {
+			type: Boolean,
+			default: true
+		},
+		uploadApi: { type: Function },
+		src: { type: String },
+		sourceUrlValue: { type: String }
+	},
+	emits: ["uploadSuccess", "register"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const src = ref(props.src || "");
+		const previewSource = ref("");
+		const cropper = ref();
+		let scaleX = 1;
+		let scaleY = 1;
+		let filename = "";
+		const ns = useNamespace("cropper-am");
+		const [register, { closeModal, setModalProps }] = useModalInner();
+		function handleBeforeUpload(file) {
+			if (file.size / 1024 / 1024 > 4) {
+				message.warn(`【${file.name}】文件大小不能超过 4MB`);
+				return false;
+			}
+			if (![
+				"image/jpg",
+				"image/jpeg",
+				"image/png",
+				"image/bmp"
+			].includes(file.type)) {
+				message.warning(`【${file.name}】${t("sys.component.cropper.acceptAvatarTypeTip")}`);
+				return false;
+			}
+			const reader = new FileReader();
+			reader.readAsDataURL(file);
+			src.value = "";
+			previewSource.value = "";
+			reader.onload = function(e) {
+				src.value = e.target?.result ?? "";
+				filename = file.name;
+			};
+			return false;
+		}
+		function handleCropend({ imgBase64 }) {
+			previewSource.value = imgBase64;
+		}
+		function handleReady(cropperInstance) {
+			cropper.value = cropperInstance;
+		}
+		function handlerToolbar(event, arg) {
+			if (event === "scaleX") scaleX = arg = scaleX === -1 ? 1 : -1;
+			if (event === "scaleY") scaleY = arg = scaleY === -1 ? 1 : -1;
+			cropper.value?.[event]?.(arg);
+		}
+		async function handleOk() {
+			const uploadApi = props.uploadApi;
+			if (uploadApi && isFunction(uploadApi)) {
+				const blob = dataURLtoBlob(previewSource.value);
+				try {
+					setModalProps({ confirmLoading: true });
+					const result = await uploadApi({
+						name: "file",
+						file: blob,
+						filename
+					});
+					emit("uploadSuccess", {
+						source: previewSource.value,
+						data: result.data.data
+					});
+					closeModal();
+				} finally {
+					setModalProps({ confirmLoading: false });
+				}
+			}
+		}
+		return (_ctx, _cache) => {
+			const _component_PlusOutlined = resolveComponent("PlusOutlined");
+			const _component_a_button = resolveComponent("a-button");
+			const _component_Avatar = resolveComponent("Avatar");
+			return openBlock(), createBlock(unref(BasicModal), mergeProps(_ctx.$attrs, {
+				title: unref(t)("sys.component.cropper.modalTitle"),
+				width: "600px",
+				"min-height": "570",
+				"can-fullscreen": false,
+				"ok-text": unref(t)("sys.okText"),
+				onRegister: unref(register),
+				onOk: handleOk
+			}), {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(ns).b()) }, [createElementVNode("div", { class: normalizeClass(unref(ns).b("left")) }, [createElementVNode("div", { class: normalizeClass(unref(ns).b("cropper")) }, [src.value ? (openBlock(), createBlock(Cropper_default, {
+					key: 0,
+					src: src.value,
+					height: "360px",
+					width: "360px",
+					circled: __props.circled,
+					onCropend: handleCropend,
+					onReady: handleReady
+				}, null, 8, ["src", "circled"])) : createCommentVNode("", true), !__props.sourceUrlValue && src.value === "/404.png" ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Upload), {
+					"list-type": "picture-card",
+					"file-list": [],
+					accept: "image/*",
+					"before-upload": handleBeforeUpload
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [
+						createVNode(_component_PlusOutlined),
+						_cache[14] || (_cache[14] = createElementVNode("div", { class: "mt12px" }, "点击或将图片拖拽到这里上传", -1)),
+						_cache[15] || (_cache[15] = createElementVNode("div", { class: "color-[#8B8B8B] mt8px" }, " 仅支持JPG、PNG、JPEG、BMP格式，文件小于4M ", -1))
+					])]),
+					_: 1
+				})])) : createCommentVNode("", true)], 2), __props.sourceUrlValue || src.value !== "/404.png" ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ns).b("toolbar"))
+				}, [createVNode(unref(Upload), {
+					"file-list": [],
+					accept: "image/*",
+					"before-upload": handleBeforeUpload
+				}, {
+					default: withCtx(() => [createElementVNode("a", {
+						title: unref(t)("sys.reUpload"),
+						placement: "bottom"
+					}, toDisplayString(unref(t)("sys.reUpload")), 9, _hoisted_3)]),
+					_: 1
+				}), createVNode(unref(Space), null, {
+					default: withCtx(() => [
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_zoom_in"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[1] || (_cache[1] = ($event) => handlerToolbar("zoom", .1))
+							}, {
+								icon: withCtx(() => [..._cache[16] || (_cache[16] = [createElementVNode("i", { class: "iconfont icon-fangda_zoom-in" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_zoom_out"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[3] || (_cache[3] = ($event) => handlerToolbar("zoom", -.1))
+							}, {
+								icon: withCtx(() => [..._cache[17] || (_cache[17] = [createElementVNode("i", { class: "iconfont icon-a-suoxiao_zoom-out1" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_rotate_left"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[5] || (_cache[5] = ($event) => handlerToolbar("rotate", -45))
+							}, {
+								icon: withCtx(() => [..._cache[18] || (_cache[18] = [createElementVNode("i", { class: "iconfont icon-xuanzhuan_rotate" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_rotate_right"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[7] || (_cache[7] = ($event) => handlerToolbar("rotate", 45))
+							}, {
+								icon: withCtx(() => [..._cache[19] || (_cache[19] = [createElementVNode("i", { class: "iconfont icon-xuanzhuan_2" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_scale_x"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[9] || (_cache[9] = ($event) => handlerToolbar("scaleX"))
+							}, {
+								icon: withCtx(() => [..._cache[20] || (_cache[20] = [createElementVNode("i", { class: "iconfont icon-shuipingfanzhuan_flip-horizontally" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_scale_y"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[10] || (_cache[10] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[11] || (_cache[11] = ($event) => handlerToolbar("scaleY"))
+							}, {
+								icon: withCtx(() => [..._cache[21] || (_cache[21] = [createElementVNode("i", { class: "iconfont icon-chuizhifanzhuan_flip-vertically" }, null, -1)])]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"]),
+						createVNode(unref(Tooltip), {
+							title: unref(t)("sys.component.cropper.btn_reset"),
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(_component_a_button, {
+								size: "small",
+								disabled: !src.value,
+								onMousedown: _cache[12] || (_cache[12] = withModifiers(() => {}, ["prevent"])),
+								onClick: _cache[13] || (_cache[13] = ($event) => handlerToolbar("reset"))
+							}, {
+								icon: withCtx(() => [createVNode(unref(ReloadOutlined))]),
+								_: 1
+							}, 8, ["disabled"])]),
+							_: 1
+						}, 8, ["title"])
+					]),
+					_: 1
+				})], 2)) : createCommentVNode("", true)], 2), createElementVNode("div", { class: normalizeClass([unref(ns).b("right"), "text-center"]) }, [_cache[22] || (_cache[22] = createTextVNode(" 预览 ", -1)), createElementVNode("div", { class: normalizeClass(unref(ns).b("group")) }, [
+					createElementVNode("div", _hoisted_4, [createVNode(_component_Avatar, {
+						src: previewSource.value,
+						size: 102
+					}, null, 8, ["src"])]),
+					createElementVNode("div", _hoisted_5, [createVNode(_component_Avatar, {
+						src: previewSource.value,
+						size: 78
+					}, null, 8, ["src"])]),
+					createElementVNode("div", _hoisted_6, [createVNode(_component_Avatar, {
+						src: previewSource.value,
+						size: 28
+					}, null, 8, ["src"])])
+				], 2)], 2)], 2), _cache[23] || (_cache[23] = createElementVNode("div", {
+					class: "absolute z-10 top-0 left-2/3 w-0 h-full",
+					style: { "border-left": "1px solid #e0e3ea" }
+				}, null, -1))]),
+				_: 1
+			}, 16, [
+				"title",
+				"ok-text",
+				"onRegister"
+			]);
+		};
+	}
+});
+//#endregion
+export { CopperModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default as default };

package/es/modules/picture-cropper/src/CopperModal.vue_vue_type_style_index_0_scoped_ee086999_lang.css

@@ -0,0 +1,71 @@
+.gct-cropper-am[data-v-ee086999] {
+  display: flex;
+}
+.gct-cropper-am-left[data-v-ee086999],
+.gct-cropper-am-right[data-v-ee086999] {
+  height: 340px;
+}
+.gct-cropper-am-left[data-v-ee086999] {
+  width: 400px;
+}
+.gct-cropper-am-right[data-v-ee086999] {
+  width: 150px;
+}
+.gct-cropper-am-cropper[data-v-ee086999] {
+  position: relative;
+  width: 360px;
+  height: 360px;
+  background: #eee;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
+  background-position: 0 0,
+      12px 12px;
+  background-size: 24px 24px;
+}
+.gct-cropper-am-toolbar[data-v-ee086999] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 360px;
+  margin-top: 10px;
+}
+.gct-cropper-am-preview[data-v-ee086999] {
+  width: 220px;
+  height: 220px;
+  margin: 0 auto;
+  overflow: hidden;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 50%;
+}
+.gct-cropper-am-preview img[data-v-ee086999] {
+  width: 100%;
+  height: 100%;
+}
+.gct-cropper-am-group[data-v-ee086999] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+  margin-top: 8px;
+  padding-top: 8px;
+}
+.empty[data-v-ee086999] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-ee086999] {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-ee086999] .ant-upload-list {
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-ee086999] .ant-upload-list .ant-upload-select-picture-card {
+  width: 100%;
+  height: 100%;
+}

package/es/modules/picture-cropper/src/Cropper.vue.d.ts

@@ -0,0 +1,96 @@
+import { CSSProperties, PropType } from 'vue';
+import { default as Cropper } from 'cropperjs';
+type Options = Cropper.Options;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    alt: {
+        type: StringConstructor;
+    };
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    realTimePreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    crossorigin: {
+        type: PropType<"" | "anonymous" | "use-credentials" | undefined>;
+        default: undefined;
+    };
+    imageStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    options: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+}>, {
+    getClass: import('vue').ComputedRef<import('vue').ClassValue[]>;
+    imgElRef: import('vue').Ref<HTMLImageElement | null | undefined, HTMLImageElement | null | undefined>;
+    getWrapperStyle: import('vue').ComputedRef<CSSProperties>;
+    getImageStyle: import('vue').ComputedRef<CSSProperties>;
+    isReady: import('vue').Ref<boolean, boolean>;
+    croppered: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("ready" | "cropend" | "cropendError")[], "ready" | "cropend" | "cropendError", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    alt: {
+        type: StringConstructor;
+    };
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    realTimePreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    crossorigin: {
+        type: PropType<"" | "anonymous" | "use-credentials" | undefined>;
+        default: undefined;
+    };
+    imageStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    options: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onCropend?: ((...args: any[]) => any) | undefined;
+    onCropendError?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: string | number;
+    height: string | number;
+    options: Options;
+    circled: boolean;
+    realTimePreview: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials" | undefined;
+    imageStyle: CSSProperties;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/modules/picture-cropper/src/Cropper.vue.mjs

@@ -0,0 +1,25 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import Cropper_vue_vue_type_script_lang_default from "./Cropper.vue_vue_type_script_lang.mjs";
+import './Cropper.vue_vue_type_style_index_0_lang.css';/* empty css                                              */
+import { createElementBlock, createElementVNode, normalizeClass, normalizeStyle, openBlock, vShow, withDirectives } from "vue";
+//#region src/modules/picture-cropper/src/Cropper.vue
+var _hoisted_1 = [
+	"src",
+	"alt",
+	"crossorigin"
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass(_ctx.getClass),
+		style: normalizeStyle(_ctx.getWrapperStyle)
+	}, [withDirectives(createElementVNode("img", {
+		ref: "imgElRef",
+		src: _ctx.src,
+		alt: _ctx.alt,
+		crossorigin: _ctx.crossorigin,
+		style: normalizeStyle(_ctx.getImageStyle)
+	}, null, 12, _hoisted_1), [[vShow, _ctx.isReady]])], 6);
+}
+var Cropper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Cropper_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+//#endregion
+export { Cropper_default as default };

package/es/modules/picture-cropper/src/Cropper.vue_vue_type_script_lang.mjs

@@ -0,0 +1,171 @@
+import { computed, defineComponent, onMounted, onUnmounted, ref, unref } from "vue";
+import { useNamespace } from "@gct-paas/core";
+import { useDebounceFn } from "@vueuse/core";
+//#region src/modules/picture-cropper/src/Cropper.vue?vue&type=script&lang.ts
+var defaultOptions = {
+	aspectRatio: 1,
+	zoomable: true,
+	zoomOnTouch: true,
+	zoomOnWheel: true,
+	cropBoxMovable: true,
+	cropBoxResizable: true,
+	toggleDragModeOnDblclick: true,
+	autoCrop: true,
+	background: true,
+	highlight: true,
+	center: true,
+	responsive: true,
+	restore: true,
+	checkCrossOrigin: true,
+	checkOrientation: true,
+	scalable: true,
+	modal: true,
+	guides: true,
+	movable: true,
+	rotatable: true
+};
+var Cropper_vue_vue_type_script_lang_default = defineComponent({
+	name: "CropperImage",
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+		alt: { type: String },
+		circled: {
+			type: Boolean,
+			default: false
+		},
+		realTimePreview: {
+			type: Boolean,
+			default: true
+		},
+		height: {
+			type: [String, Number],
+			default: "360px"
+		},
+		width: {
+			type: [String, Number],
+			default: "360px"
+		},
+		crossorigin: {
+			type: String,
+			default: void 0
+		},
+		imageStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: [
+		"cropend",
+		"ready",
+		"cropendError"
+	],
+	setup(props, { attrs, emit }) {
+		const imgElRef = ref();
+		const cropper = ref();
+		const isReady = ref(false);
+		const ns = useNamespace("cropper-image");
+		const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
+		const getImageStyle = computed(() => {
+			return {
+				height: props.height,
+				width: props.width,
+				maxWidth: "100%",
+				...props.imageStyle
+			};
+		});
+		const getClass = computed(() => {
+			return [
+				ns.b(),
+				attrs.class,
+				{ [ns.m("circled")]: props.circled }
+			];
+		});
+		const getWrapperStyle = computed(() => {
+			return {
+				height: `${props.height}`.replace(/px/, "") + "px",
+				width: `${props.width}`.replace(/px/, "") + "px"
+			};
+		});
+		onMounted(init);
+		onUnmounted(() => {
+			cropper.value?.destroy();
+		});
+		async function init() {
+			const imgEl = unref(imgElRef);
+			if (!imgEl) return;
+			const [{ default: CropperCtor }] = await Promise.all([import("cropperjs"), import("cropperjs/dist/cropper.css")]);
+			cropper.value = new CropperCtor(imgEl, {
+				...defaultOptions,
+				ready: () => {
+					isReady.value = true;
+					realTimeCroppered();
+					emit("ready", cropper.value);
+				},
+				crop() {
+					debounceRealTimeCroppered();
+				},
+				zoom() {
+					debounceRealTimeCroppered();
+				},
+				cropmove() {
+					debounceRealTimeCroppered();
+				},
+				...props.options
+			});
+		}
+		function realTimeCroppered() {
+			props.realTimePreview && croppered();
+		}
+		function croppered() {
+			if (!cropper.value) return;
+			let imgInfo = cropper.value.getData();
+			(props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas()).toBlob((blob) => {
+				if (!blob) return;
+				let fileReader = new FileReader();
+				fileReader.readAsDataURL(blob);
+				fileReader.onloadend = (e) => {
+					emit("cropend", {
+						imgBase64: e.target?.result ?? "",
+						imgInfo
+					});
+				};
+				fileReader.onerror = () => {
+					emit("cropendError");
+				};
+			}, "image/png");
+		}
+		function getRoundedCanvas() {
+			const sourceCanvas = cropper.value.getCroppedCanvas();
+			const canvas = document.createElement("canvas");
+			const context = canvas.getContext("2d");
+			const width = sourceCanvas.width;
+			const height = sourceCanvas.height;
+			canvas.width = width;
+			canvas.height = height;
+			context.imageSmoothingEnabled = true;
+			context.drawImage(sourceCanvas, 0, 0, width, height);
+			context.globalCompositeOperation = "destination-in";
+			context.beginPath();
+			context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+			context.fill();
+			return canvas;
+		}
+		return {
+			getClass,
+			imgElRef,
+			getWrapperStyle,
+			getImageStyle,
+			isReady,
+			croppered
+		};
+	}
+});
+//#endregion
+export { Cropper_vue_vue_type_script_lang_default as default };

package/es/modules/picture-cropper/src/Cropper.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,4 @@
+.gct-cropper-image--circled .cropper-view-box,
+.gct-cropper-image--circled .cropper-face {
+  border-radius: 50%;
+}