@veltra/desktop 1.7.8 → 1.7.10

package/dist/components/image-cropper/draw-crop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-crop.js","names":[],"sources":["../../../src/components/image-cropper/draw-crop.ts"],"sourcesContent":["import type { ImageCropperResult } from '../../types'\nimport type { SelectionRect } from './use-selection'\n\n/** 影响裁剪输出的变换（缩放 / 平移只影响画布展示，与输出无关） */\nexport interface CropTransform {\n  /** 90° 步进角度：0 / 90 / 180 / 270 */\n  rotation: number\n  flipX: boolean\n  flipY: boolean\n}\n\n/** 输出尺寸，缺省维度按选区比例推算，都不传则为原图选区像素尺寸 */\nexport interface CropOutputSize {\n  width?: number\n  height?: number\n}\n\n/**\n * 把选区按当前旋转 / 翻转变换绘制到目标 canvas，预览（P4）与 getResult()（P5）共用。\n * 输出为屏幕上看到的裁剪结果：先旋转后翻转，与舞台 transform 链一致\n */\nexport function drawCropToCanvas(\n  img: HTMLImageElement,\n  selection: SelectionRect,\n  transform: CropTransform,\n  canvas: HTMLCanvasElement,\n  outSize?: CropOutputSize\n): void {\n  const { rotation, flipX, flipY } = transform\n  // 旋转 90° / 270° 后输出的宽为选区高、高为选区宽\n  const swapped = rotation % 180 !== 0\n  const baseW = swapped ? selection.height : selection.width\n  const baseH = swapped ? selection.width : selection.height\n\n  const outW = Math.max(\n    1,\n    Math.round(outSize?.width ?? ((outSize?.height ?? baseH) / baseH) * baseW)\n  )\n  const outH = Math.max(\n    1,\n    Math.round(outSize?.height ?? ((outSize?.width ?? baseW) / baseW) * baseH)\n  )\n  canvas.width = outW\n  canvas.height = outH\n\n  const ctx = canvas.getContext('2d')\n  if (!ctx) return\n\n  ctx.translate(outW / 2, outH / 2)\n  ctx.rotate((rotation * Math.PI) / 180)\n  ctx.scale(((flipX ? -1 : 1) * outW) / baseW, ((flipY ? -1 : 1) * outH) / baseH)\n  // 以画布中心为锚绘制选区，旋转 / 翻转由上面的变换承担\n  ctx.drawImage(\n    img,\n    selection.x,\n    selection.y,\n    selection.width,\n    selection.height,\n    -selection.width / 2,\n    -selection.height / 2,\n    selection.width,\n    selection.height\n  )\n}\n\n/**\n * canvas 导出为 Blob。\n * 跨域图片污染画布时 toBlob 同步抛 SecurityError，包装为可捕获的 Promise 拒绝\n */\nfunction canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {\n  return new Promise((resolve, reject) => {\n    try {\n      canvas.toBlob((blob) => {\n        if (blob) resolve(blob)\n        else reject(new Error('Export crop result failed: canvas.toBlob got null'))\n      }, 'image/png')\n    } catch (err) {\n      reject(\n        new Error('Export crop result failed: canvas is tainted by cross-origin image', {\n          cause: err\n        })\n      )\n    }\n  })\n}\n\n/** Blob 读取为 dataURL 形式的 base64 */\nfunction blobToBase64(blob: Blob): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader()\n    reader.onload = () => resolve(reader.result as string)\n    reader.onerror = () =>\n      reject(reader.error ?? new Error('Export crop result failed: read blob as base64 failed'))\n    reader.readAsDataURL(blob)\n  })\n}\n\n/**\n * 输出选区裁剪结果：离屏 canvas 经 drawCropToCanvas 按原图像素绘制后导出 Blob + base64。\n * outSize 缺省为原图选区像素尺寸，传入则按该尺寸缩放输出\n */\nexport async function cropToResult(\n  img: HTMLImageElement,\n  selection: SelectionRect,\n  transform: CropTransform,\n  outSize?: CropOutputSize\n): Promise<ImageCropperResult> {\n  const canvas = document.createElement('canvas')\n  drawCropToCanvas(img, selection, transform, canvas, outSize)\n  const blob = await canvasToBlob(canvas)\n  return { blob, base64: await blobToBase64(blob) }\n}\n"],"mappings":";;;;;AAqBA,SAAgB,iBACd,KACA,WACA,WACA,QACA,SACM;CACN,MAAM,EAAE,UAAU,OAAO,UAAU;CAEnC,MAAM,UAAU,WAAW,QAAQ;CACnC,MAAM,QAAQ,UAAU,UAAU,SAAS,UAAU;CACrD,MAAM,QAAQ,UAAU,UAAU,QAAQ,UAAU;CAEpD,MAAM,OAAO,KAAK,IAChB,GACA,KAAK,MAAM,SAAS,UAAW,SAAS,UAAU,SAAS,QAAS,KAAK,CAC3E;CACA,MAAM,OAAO,KAAK,IAChB,GACA,KAAK,MAAM,SAAS,WAAY,SAAS,SAAS,SAAS,QAAS,KAAK,CAC3E;CACA,OAAO,QAAQ;CACf,OAAO,SAAS;CAEhB,MAAM,MAAM,OAAO,WAAW,IAAI;CAClC,IAAI,CAAC,KAAK;CAEV,IAAI,UAAU,OAAO,GAAG,OAAO,CAAC;CAChC,IAAI,OAAQ,WAAW,KAAK,KAAM,GAAG;CACrC,IAAI,OAAQ,QAAQ,KAAK,KAAK,OAAQ,QAAS,QAAQ,KAAK,KAAK,OAAQ,KAAK;CAE9E,IAAI,UACF,KACA,UAAU,GACV,UAAU,GACV,UAAU,OACV,UAAU,QACV,CAAC,UAAU,QAAQ,GACnB,CAAC,UAAU,SAAS,GACpB,UAAU,OACV,UAAU,MACZ;AACF;;;;;AAMA,SAAS,aAAa,QAA0C;CAC9D,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,IAAI;GACF,OAAO,QAAQ,SAAS;IACtB,IAAI,MAAM,QAAQ,IAAI;SACjB,uBAAO,IAAI,MAAM,mDAAmD,CAAC;GAC5E,GAAG,WAAW;EAChB,SAAS,KAAK;GACZ,OACE,IAAI,MAAM,sEAAsE,EAC9E,OAAO,IACT,CAAC,CACH;EACF;CACF,CAAC;AACH;;AAGA,SAAS,aAAa,MAA6B;CACjD,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,SAAS,IAAI,WAAW;EAC9B,OAAO,eAAe,QAAQ,OAAO,MAAgB;EACrD,OAAO,gBACL,OAAO,OAAO,yBAAS,IAAI,MAAM,uDAAuD,CAAC;EAC3F,OAAO,cAAc,IAAI;CAC3B,CAAC;AACH;;;;;AAMA,eAAsB,aACpB,KACA,WACA,WACA,SAC6B;CAC7B,MAAM,SAAS,SAAS,cAAc,QAAQ;CAC9C,iBAAiB,KAAK,WAAW,WAAW,QAAQ,OAAO;CAC3D,MAAM,OAAO,MAAM,aAAa,MAAM;CACtC,OAAO;EAAE;EAAM,QAAQ,MAAM,aAAa,IAAI;CAAE;AAClD"}

package/dist/components/image-cropper/image-cropper.js

@@ -0,0 +1,344 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { cropToResult } from "./draw-crop.js";
+import { useImageLoader } from "./use-image-loader.js";
+import { usePreview } from "./use-preview.js";
+import { SELECTION_HANDLES, useSelection } from "./use-selection.js";
+import { useTransform } from "./use-transform.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, reactive, renderList, renderSlot, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { useResizeObserver } from "@veltra/compositions";
+import { bem } from "@veltra/utils";
+import { ArrowUpdown, Refresh, RotateLeft, RotateRight, ZoomIn, ZoomOut } from "@veltra/icons/normal";
+//#region src/components/image-cropper/image-cropper.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["data-handle"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "ImageCropper",
+	__name: "image-cropper",
+	props: {
+		src: {},
+		aspectRatio: {},
+		showToolbar: {
+			type: Boolean,
+			default: true
+		},
+		showPreview: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["crop-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("image-cropper");
+		const canvasRef = shallowRef();
+		const selectionRef = shallowRef();
+		const previewCanvasRef = shallowRef();
+		const { imageUrl, loaded, naturalWidth, naturalHeight, imageEl } = useImageLoader({ src: () => props.src });
+		const canvasSize = reactive({
+			width: 0,
+			height: 0
+		});
+		/** 宽高比预设，value 为 undefined 表示自由比例 */
+		const RATIO_PRESETS = [
+			{
+				label: "自由",
+				value: void 0
+			},
+			{
+				label: "1:1",
+				value: 1
+			},
+			{
+				label: "4:3",
+				value: 4 / 3
+			},
+			{
+				label: "16:9",
+				value: 16 / 9
+			}
+		];
+		/** 当前生效的宽高比：工具栏预设可覆盖 prop，prop 变化时同步回来 */
+		const currentRatio = shallowRef(props.aspectRatio);
+		function setAspectRatio(ratio) {
+			currentRatio.value = ratio;
+		}
+		const { transform, fit, reset, resetTransform, zoomIn, zoomOut, rotate, flip, toImageDelta } = useTransform({
+			target: canvasRef,
+			canvasSize: () => canvasSize,
+			imageWidth: () => naturalWidth.value,
+			imageHeight: () => naturalHeight.value,
+			onReset: () => initSelection()
+		});
+		const { selection, initSelection, clearSelection } = useSelection({
+			target: selectionRef,
+			imageWidth: () => naturalWidth.value,
+			imageHeight: () => naturalHeight.value,
+			toImageDelta,
+			aspectRatio: () => currentRatio.value
+		});
+		usePreview({
+			canvas: previewCanvasRef,
+			image: imageEl,
+			selection,
+			transform,
+			canvasSize: () => canvasSize
+		});
+		useResizeObserver({
+			targets: canvasRef,
+			onResize([entry]) {
+				if (!entry) return;
+				canvasSize.width = entry.contentRect.width;
+				canvasSize.height = entry.contentRect.height;
+				if (loaded.value) fit();
+			}
+		});
+		watch(() => props.src, () => {
+			reset();
+			clearSelection();
+		});
+		watch(() => props.aspectRatio, (ratio) => {
+			currentRatio.value = ratio;
+		});
+		watch(loaded, (isLoaded) => {
+			if (!isLoaded) return;
+			fit();
+			initSelection();
+		});
+		watch([selection, () => ({ ...transform })], () => {
+			const sel = selection.value;
+			if (!sel) return;
+			emit("crop-change", {
+				selection: { ...sel },
+				transform: {
+					rotation: transform.rotation,
+					flipX: transform.flipX,
+					flipY: transform.flipY
+				}
+			});
+		});
+		/** 输出当前选区裁剪结果：默认原图选区像素，options 传入目标宽 / 高时按该尺寸缩放 */
+		async function getResult(options) {
+			const img = imageEl.value;
+			const sel = selection.value;
+			if (!img || !sel) throw new Error("Export crop result failed: image not loaded or no selection");
+			return cropToResult(img, sel, transform, options);
+		}
+		__expose({ getResult });
+		/** 舞台样式：图片与选区层共用同一变换，选区以图片像素坐标定位 */
+		const stageStyle = computed(() => {
+			const { translateX, translateY, rotation, scale, flipX, flipY } = transform;
+			return {
+				width: `${naturalWidth.value}px`,
+				height: `${naturalHeight.value}px`,
+				transform: `translate(${translateX}px, ${translateY}px) rotate(${rotation}deg) scale(${(flipX ? -1 : 1) * scale}, ${(flipY ? -1 : 1) * scale})`,
+				"--u-image-cropper-inv-scale": String(1 / scale)
+			};
+		});
+		const selectionStyle = computed(() => {
+			const sel = selection.value;
+			if (!sel) return {};
+			return {
+				left: `${sel.x}px`,
+				top: `${sel.y}px`,
+				width: `${sel.width}px`,
+				height: `${sel.height}px`
+			};
+		});
+		/** 选区外上 / 下 / 左 / 右四向遮罩 */
+		const maskStyles = computed(() => {
+			const sel = selection.value;
+			if (!sel) return [];
+			const W = naturalWidth.value;
+			const H = naturalHeight.value;
+			const right = sel.x + sel.width;
+			const bottom = sel.y + sel.height;
+			return [
+				{
+					left: "0px",
+					top: "0px",
+					width: `${W}px`,
+					height: `${sel.y}px`
+				},
+				{
+					left: "0px",
+					top: `${bottom}px`,
+					width: `${W}px`,
+					height: `${H - bottom}px`
+				},
+				{
+					left: "0px",
+					top: `${sel.y}px`,
+					width: `${sel.x}px`,
+					height: `${sel.height}px`
+				},
+				{
+					left: `${right}px`,
+					top: `${sel.y}px`,
+					width: `${W - right}px`,
+					height: `${sel.height}px`
+				}
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).b) }, [
+				__props.showToolbar ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("toolbar"))
+				}, [renderSlot(_ctx.$slots, "toolbar", {
+					zoomIn: unref(zoomIn),
+					zoomOut: unref(zoomOut),
+					rotate: unref(rotate),
+					flip: unref(flip),
+					reset: unref(resetTransform),
+					setAspectRatio,
+					aspectRatio: currentRatio.value
+				}, () => [
+					createCommentVNode(" 宽高比预设 "),
+					createElementVNode("div", { class: normalizeClass(unref(cls).e("tool-group")) }, [(openBlock(), createElementBlock(Fragment, null, renderList(RATIO_PRESETS, (preset) => {
+						return createElementVNode("button", {
+							key: preset.label,
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(bem).is("active", preset.value === currentRatio.value)]),
+							onClick: ($event) => setAspectRatio(preset.value)
+						}, toDisplayString(preset.label), 11, _hoisted_1);
+					}), 64))], 2),
+					createCommentVNode(" 缩放 / 旋转 / 翻转 / 重置 "),
+					createElementVNode("div", { class: normalizeClass(unref(cls).e("tool-group")) }, [
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "缩小",
+							title: "缩小",
+							onClick: _cache[0] || (_cache[0] = ($event) => unref(zoomOut)())
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(ZoomOut))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "放大",
+							title: "放大",
+							onClick: _cache[1] || (_cache[1] = ($event) => unref(zoomIn)())
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(ZoomIn))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "逆时针旋转 90°",
+							title: "逆时针旋转 90°",
+							onClick: _cache[2] || (_cache[2] = ($event) => unref(rotate)(-1))
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(RotateLeft))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "顺时针旋转 90°",
+							title: "顺时针旋转 90°",
+							onClick: _cache[3] || (_cache[3] = ($event) => unref(rotate)(1))
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(RotateRight))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "水平翻转",
+							title: "水平翻转",
+							onClick: _cache[4] || (_cache[4] = ($event) => unref(flip)("horizontal"))
+						}, [createVNode(unref(_sfc_main$1), {
+							size: 15,
+							class: normalizeClass(unref(cls).e("flip-icon"))
+						}, {
+							default: withCtx(() => [createVNode(unref(ArrowUpdown))]),
+							_: 1
+						}, 8, ["class"])], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "垂直翻转",
+							title: "垂直翻转",
+							onClick: _cache[5] || (_cache[5] = ($event) => unref(flip)("vertical"))
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(ArrowUpdown))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "重置",
+							title: "重置",
+							onClick: _cache[6] || (_cache[6] = ($event) => unref(resetTransform)())
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(Refresh))]),
+							_: 1
+						})], 2)
+					], 2)
+				])], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", {
+					class: normalizeClass(unref(cls).e("canvas")),
+					ref_key: "canvasRef",
+					ref: canvasRef
+				}, [unref(loaded) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("stage")),
+					style: normalizeStyle(stageStyle.value)
+				}, [createElementVNode("img", {
+					class: normalizeClass(unref(cls).e("image")),
+					src: unref(imageUrl),
+					draggable: "false",
+					alt: ""
+				}, null, 10, _hoisted_2), unref(selection) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					createCommentVNode(" 选区外半透明遮罩 "),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(maskStyles.value, (style, i) => {
+						return openBlock(), createElementBlock("div", {
+							key: i,
+							class: normalizeClass(unref(cls).e("mask")),
+							style: normalizeStyle(style)
+						}, null, 6);
+					}), 128)),
+					createCommentVNode(" 裁剪选区：整体拖动 + 8 个手柄调整大小 "),
+					createElementVNode("div", {
+						class: normalizeClass(unref(cls).e("selection")),
+						ref_key: "selectionRef",
+						ref: selectionRef,
+						style: normalizeStyle(selectionStyle.value)
+					}, [
+						createCommentVNode(" 3×3 网格线，顺序对应 style.scss 中 nth-child 的定位 "),
+						(openBlock(), createElementBlock(Fragment, null, renderList(4, (i) => {
+							return createElementVNode("i", {
+								key: i,
+								class: normalizeClass(unref(cls).e("grid-line"))
+							}, null, 2);
+						}), 64)),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(SELECTION_HANDLES), (handle) => {
+							return openBlock(), createElementBlock("i", {
+								key: handle,
+								class: normalizeClass(unref(cls).e("handle")),
+								"data-handle": handle
+							}, null, 10, _hoisted_3);
+						}), 128))
+					], 6)
+				], 64)) : createCommentVNode("v-if", true)], 6)) : createCommentVNode("v-if", true)], 2),
+				__props.showPreview && unref(loaded) ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(cls).e("preview"))
+				}, [createElementVNode("canvas", {
+					class: normalizeClass(unref(cls).e("preview-canvas")),
+					ref_key: "previewCanvasRef",
+					ref: previewCanvasRef
+				}, null, 2)], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=image-cropper.js.map

package/dist/components/image-cropper/image-cropper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.js","names":[],"sources":["../../../src/components/image-cropper/image-cropper.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.b\">\n    <div v-if=\"showToolbar\" :class=\"cls.e('toolbar')\">\n      <slot\n        name=\"toolbar\"\n        :zoom-in=\"zoomIn\"\n        :zoom-out=\"zoomOut\"\n        :rotate=\"rotate\"\n        :flip=\"flip\"\n        :reset=\"resetTransform\"\n        :set-aspect-ratio=\"setAspectRatio\"\n        :aspect-ratio=\"currentRatio\"\n      >\n        <!-- 宽高比预设 -->\n        <div :class=\"cls.e('tool-group')\">\n          <button\n            v-for=\"preset in RATIO_PRESETS\"\n            :key=\"preset.label\"\n            type=\"button\"\n            :class=\"[cls.e('tool'), bem.is('active', preset.value === currentRatio)]\"\n            @click=\"setAspectRatio(preset.value)\"\n          >\n            {{ preset.label }}\n          </button>\n        </div>\n\n        <!-- 缩放 / 旋转 / 翻转 / 重置 -->\n        <div :class=\"cls.e('tool-group')\">\n          <button\n            type=\"button\"\n            :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n            aria-label=\"缩小\"\n            title=\"缩小\"\n            @click=\"zoomOut()\"\n          >\n            <u-icon :size=\"15\"><ZoomOut /></u-icon>\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n            aria-label=\"放大\"\n            title=\"放大\"\n            @click=\"zoomIn()\"\n          >\n            <u-icon :size=\"15\"><ZoomIn /></u-icon>\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n            aria-label=\"逆时针旋转 90°\"\n            title=\"逆时针旋转 90°\"\n            @click=\"rotate(-1)\"\n          >\n            <u-icon :size=\"15\"><RotateLeft /></u-icon>\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n            aria-label=\"顺时针旋转 90°\"\n            title=\"顺时针旋转 90°\"\n            @click=\"rotate(1)\"\n          >\n            <u-icon :size=\"15\"><RotateRight /></u-icon>\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n            aria-label=\"水平翻转\"\n            title=\"水平翻转\"\n            @click=\"flip('horizontal')\"\n          >\n            <u-icon :size=\"15\" :class=\"cls.e('flip-icon')\"><ArrowUpdown /></u-icon>\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n            aria-label=\"垂直翻转\"\n            title=\"垂直翻转\"\n            @click=\"flip('vertical')\"\n          >\n            <u-icon :size=\"15\"><ArrowUpdown /></u-icon>\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n            aria-label=\"重置\"\n            title=\"重置\"\n            @click=\"resetTransform()\"\n          >\n            <u-icon :size=\"15\"><Refresh /></u-icon>\n          </button>\n        </div>\n      </slot>\n    </div>\n\n    <div :class=\"cls.e('canvas')\" ref=\"canvasRef\">\n      <div v-if=\"loaded\" :class=\"cls.e('stage')\" :style=\"stageStyle\">\n        <img :class=\"cls.e('image')\" :src=\"imageUrl\" draggable=\"false\" alt=\"\" />\n\n        <template v-if=\"selection\">\n          <!-- 选区外半透明遮罩 -->\n          <div v-for=\"(style, i) in maskStyles\" :key=\"i\" :class=\"cls.e('mask')\" :style=\"style\" />\n\n          <!-- 裁剪选区：整体拖动 + 8 个手柄调整大小 -->\n          <div :class=\"cls.e('selection')\" ref=\"selectionRef\" :style=\"selectionStyle\">\n            <!-- 3×3 网格线，顺序对应 style.scss 中 nth-child 的定位 -->\n            <i v-for=\"i in 4\" :key=\"i\" :class=\"cls.e('grid-line')\" />\n            <i\n              v-for=\"handle in SELECTION_HANDLES\"\n              :key=\"handle\"\n              :class=\"cls.e('handle')\"\n              :data-handle=\"handle\"\n            />\n          </div>\n        </template>\n      </div>\n    </div>\n\n    <div v-if=\"showPreview && loaded\" :class=\"cls.e('preview')\">\n      <canvas :class=\"cls.e('preview-canvas')\" ref=\"previewCanvasRef\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useResizeObserver } from '@veltra/compositions'\nimport {\n  ArrowUpdown,\n  Refresh,\n  RotateLeft,\n  RotateRight,\n  ZoomIn,\n  ZoomOut\n} from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, reactive, shallowRef, watch } from 'vue'\n\nimport type {\n  ImageCropperProps,\n  ImageCropperEmits,\n  ImageCropperResult,\n  ImageCropperResultOptions,\n  _ImageCropperExposed\n} from '../../types'\nimport { UIcon } from '../icon'\nimport { cropToResult } from './draw-crop'\nimport { useImageLoader } from './use-image-loader'\nimport { usePreview } from './use-preview'\nimport { SELECTION_HANDLES, useSelection } from './use-selection'\nimport { useTransform } from './use-transform'\n\ndefineOptions({ name: 'ImageCropper' })\n\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\n  showToolbar: true,\n  showPreview: true\n})\n\nconst emit = defineEmits<ImageCropperEmits>()\n\nconst cls = bem('image-cropper')\n\nconst canvasRef = shallowRef<HTMLElement>()\nconst selectionRef = shallowRef<HTMLElement>()\nconst previewCanvasRef = shallowRef<HTMLCanvasElement>()\n\nconst { imageUrl, loaded, naturalWidth, naturalHeight, imageEl } = useImageLoader({\n  src: () => props.src\n})\n\nconst canvasSize = reactive({ width: 0, height: 0 })\n\n/** 宽高比预设，value 为 undefined 表示自由比例 */\nconst RATIO_PRESETS: { label: string; value?: number }[] = [\n  { label: '自由', value: undefined },\n  { label: '1:1', value: 1 },\n  { label: '4:3', value: 4 / 3 },\n  { label: '16:9', value: 16 / 9 }\n]\n\n/** 当前生效的宽高比：工具栏预设可覆盖 prop，prop 变化时同步回来 */\nconst currentRatio = shallowRef(props.aspectRatio)\n\nfunction setAspectRatio(ratio: number | undefined) {\n  currentRatio.value = ratio\n}\n\nconst { transform, fit, reset, resetTransform, zoomIn, zoomOut, rotate, flip, toImageDelta } =\n  useTransform({\n    target: canvasRef,\n    canvasSize: () => canvasSize,\n    imageWidth: () => naturalWidth.value,\n    imageHeight: () => naturalHeight.value,\n    onReset: () => initSelection()\n  })\n\nconst { selection, initSelection, clearSelection } = useSelection({\n  target: selectionRef,\n  imageWidth: () => naturalWidth.value,\n  imageHeight: () => naturalHeight.value,\n  toImageDelta,\n  aspectRatio: () => currentRatio.value\n})\n\nusePreview({\n  canvas: previewCanvasRef,\n  image: imageEl,\n  selection,\n  transform,\n  canvasSize: () => canvasSize\n})\n\nuseResizeObserver({\n  targets: canvasRef,\n  onResize([entry]) {\n    if (!entry) return\n    canvasSize.width = entry.contentRect.width\n    canvasSize.height = entry.contentRect.height\n    if (loaded.value) fit()\n  }\n})\n\nwatch(\n  () => props.src,\n  () => {\n    reset()\n    clearSelection()\n  }\n)\n\nwatch(\n  () => props.aspectRatio,\n  (ratio) => {\n    currentRatio.value = ratio\n  }\n)\n\nwatch(loaded, (isLoaded) => {\n  if (!isLoaded) return\n  fit()\n  initSelection()\n})\n\n// 选区或图片变换变化时发出裁剪变化事件，载荷为当前选区（图片像素坐标）与变换摘要\nwatch([selection, () => ({ ...transform })], () => {\n  const sel = selection.value\n  if (!sel) return\n  emit('crop-change', {\n    selection: { ...sel },\n    transform: { rotation: transform.rotation, flipX: transform.flipX, flipY: transform.flipY }\n  })\n})\n\n/** 输出当前选区裁剪结果：默认原图选区像素，options 传入目标宽 / 高时按该尺寸缩放 */\nasync function getResult(options?: ImageCropperResultOptions): Promise<ImageCropperResult> {\n  const img = imageEl.value\n  const sel = selection.value\n  if (!img || !sel) throw new Error('Export crop result failed: image not loaded or no selection')\n  return cropToResult(img, sel, transform, options)\n}\n\ndefineExpose<_ImageCropperExposed>({ getResult })\n\n/** 舞台样式：图片与选区层共用同一变换，选区以图片像素坐标定位 */\nconst stageStyle = computed(() => {\n  const { translateX, translateY, rotation, scale, flipX, flipY } = transform\n  return {\n    width: `${naturalWidth.value}px`,\n    height: `${naturalHeight.value}px`,\n    transform: `translate(${translateX}px, ${translateY}px) rotate(${rotation}deg) scale(${(flipX ? -1 : 1) * scale}, ${(flipY ? -1 : 1) * scale})`,\n    // 逆缩放系数：选区边框 / 网格线 / 手柄在缩放后保持屏幕恒定尺寸\n    '--u-image-cropper-inv-scale': String(1 / scale)\n  }\n})\n\nconst selectionStyle = computed(() => {\n  const sel = selection.value\n  if (!sel) return {}\n  return {\n    left: `${sel.x}px`,\n    top: `${sel.y}px`,\n    width: `${sel.width}px`,\n    height: `${sel.height}px`\n  }\n})\n\n/** 选区外上 / 下 / 左 / 右四向遮罩 */\nconst maskStyles = computed(() => {\n  const sel = selection.value\n  if (!sel) return []\n  const W = naturalWidth.value\n  const H = naturalHeight.value\n  const right = sel.x + sel.width\n  const bottom = sel.y + sel.height\n  return [\n    { left: '0px', top: '0px', width: `${W}px`, height: `${sel.y}px` },\n    { left: '0px', top: `${bottom}px`, width: `${W}px`, height: `${H - bottom}px` },\n    { left: '0px', top: `${sel.y}px`, width: `${sel.x}px`, height: `${sel.height}px` },\n    { left: `${right}px`, top: `${sel.y}px`, width: `${W - right}px`, height: `${sel.height}px` }\n  ]\n})\n</script>\n"],"mappings":"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"}

package/dist/components/image-cropper/style.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/image-cropper/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/image-cropper/style2.css

@@ -0,0 +1,205 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：`UITheme.render()` 按主题系列写入 html[data-theme] */
+.u-image-cropper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.u-image-cropper__toolbar {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--u-border-color);
+  background-color: var(--u-bg-color-top);
+}
+.u-image-cropper__tool-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--u-border-color);
+  border-radius: var(--u-radius-small);
+  background-color: var(--u-bg-color-middle);
+}
+.u-image-cropper__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: calc(var(--u-radius-small) - 2px);
+  background: transparent;
+  color: var(--u-text-color-second);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-image-cropper__tool:hover {
+  color: var(--u-color-primary);
+  background: var(--u-color-primary-a-10);
+}
+.u-image-cropper__tool.is-active {
+  color: var(--u-color-primary);
+  background: var(--u-color-primary-a-16);
+}
+.u-image-cropper__tool:focus-visible {
+  box-shadow: var(--u-focus-ring);
+}
+.u-image-cropper__tool--icon {
+  width: 28px;
+  padding: 0;
+}
+.u-image-cropper__flip-icon {
+  transform: rotate(90deg);
+}
+.u-image-cropper__canvas {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--u-bg-color-bottom);
+}
+.u-image-cropper__stage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 50% 50%;
+}
+.u-image-cropper__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+.u-image-cropper__mask {
+  position: absolute;
+  background-color: var(--u-bg-color-black-a-70);
+}
+.u-image-cropper__selection {
+  position: absolute;
+  box-sizing: border-box;
+  border-style: solid;
+  border-color: var(--u-text-color-white);
+  border-width: calc(1px * var(--u-image-cropper-inv-scale, 1));
+  cursor: move;
+}
+.u-image-cropper__grid-line {
+  position: absolute;
+  pointer-events: none;
+  background-color: var(--u-text-color-white-a-50);
+}
+.u-image-cropper__grid-line:nth-child(-n+2) {
+  top: 0;
+  bottom: 0;
+  width: calc(1px * var(--u-image-cropper-inv-scale, 1));
+}
+.u-image-cropper__grid-line:nth-child(n+3) {
+  left: 0;
+  right: 0;
+  height: calc(1px * var(--u-image-cropper-inv-scale, 1));
+}
+.u-image-cropper__grid-line:nth-child(1) {
+  left: 33.3333%;
+}
+.u-image-cropper__grid-line:nth-child(2) {
+  left: 66.6667%;
+}
+.u-image-cropper__grid-line:nth-child(3) {
+  top: 33.3333%;
+}
+.u-image-cropper__grid-line:nth-child(4) {
+  top: 66.6667%;
+}
+.u-image-cropper__handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: var(--u-text-color-white);
+  box-shadow: var(--u-shadow-sm);
+  transform: translate(-50%, -50%) scale(var(--u-image-cropper-inv-scale, 1));
+}
+.u-image-cropper__handle[data-handle=nw] {
+  left: 0;
+  top: 0;
+  cursor: nwse-resize;
+}
+.u-image-cropper__handle[data-handle=n] {
+  left: 50%;
+  top: 0;
+  cursor: ns-resize;
+}
+.u-image-cropper__handle[data-handle=ne] {
+  left: 100%;
+  top: 0;
+  cursor: nesw-resize;
+}
+.u-image-cropper__handle[data-handle=e] {
+  left: 100%;
+  top: 50%;
+  cursor: ew-resize;
+}
+.u-image-cropper__handle[data-handle=se] {
+  left: 100%;
+  top: 100%;
+  cursor: nwse-resize;
+}
+.u-image-cropper__handle[data-handle=s] {
+  left: 50%;
+  top: 100%;
+  cursor: ns-resize;
+}
+.u-image-cropper__handle[data-handle=sw] {
+  left: 0;
+  top: 100%;
+  cursor: nesw-resize;
+}
+.u-image-cropper__handle[data-handle=w] {
+  left: 0;
+  top: 50%;
+  cursor: ew-resize;
+}
+.u-image-cropper__preview {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 30%;
+  max-height: 30%;
+  border: 1px solid var(--u-border-color);
+  border-radius: var(--u-radius-small);
+  background-color: var(--u-bg-color-top);
+  box-shadow: var(--u-shadow);
+  overflow: hidden;
+  pointer-events: none;
+}
+.u-image-cropper__preview-canvas {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}

package/dist/components/image-cropper/use-image-loader.js

@@ -0,0 +1,59 @@
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+//#region src/components/image-cropper/use-image-loader.ts
+/** 加载 File / Blob / URL 图片源，File / Blob 走 objectURL 并在替换与卸载时释放 */
+function useImageLoader(options) {
+	const { src } = options;
+	const imageUrl = shallowRef("");
+	const loaded = shallowRef(false);
+	const error = shallowRef(false);
+	const naturalWidth = shallowRef(0);
+	const naturalHeight = shallowRef(0);
+	const imageEl = shallowRef();
+	let objectUrl;
+	function revokeObjectUrl() {
+		if (!objectUrl) return;
+		URL.revokeObjectURL(objectUrl);
+		objectUrl = void 0;
+	}
+	function load(source) {
+		revokeObjectUrl();
+		imageUrl.value = "";
+		loaded.value = false;
+		error.value = false;
+		naturalWidth.value = 0;
+		naturalHeight.value = 0;
+		imageEl.value = void 0;
+		if (!source) return;
+		const url = typeof source === "string" ? source : objectUrl = URL.createObjectURL(source);
+		const el = new Image();
+		if (typeof source === "string") el.crossOrigin = "anonymous";
+		el.onload = () => {
+			naturalWidth.value = el.naturalWidth;
+			naturalHeight.value = el.naturalHeight;
+			imageEl.value = el;
+			loaded.value = true;
+		};
+		el.onerror = () => {
+			error.value = true;
+			imageUrl.value = "";
+		};
+		el.src = url;
+		imageUrl.value = url;
+	}
+	watch(src, load, { immediate: true });
+	onBeforeUnmount(() => {
+		revokeObjectUrl();
+	});
+	return {
+		imageUrl,
+		loaded,
+		error,
+		naturalWidth,
+		naturalHeight,
+		imageEl
+	};
+}
+//#endregion
+export { useImageLoader };
+
+//# sourceMappingURL=use-image-loader.js.map

package/dist/components/image-cropper/use-image-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-loader.js","names":[],"sources":["../../../src/components/image-cropper/use-image-loader.ts"],"sourcesContent":["import { onBeforeUnmount, shallowRef, watch, type ShallowRef } from 'vue'\n\ninterface UseImageLoaderOptions {\n  /** 图片源（File / Blob / URL） */\n  src: () => File | Blob | string | undefined\n}\n\ninterface UseImageLoaderReturn {\n  /** 用于渲染的图片地址 */\n  imageUrl: ShallowRef<string>\n  /** 是否加载完成 */\n  loaded: ShallowRef<boolean>\n  /** 是否加载失败 */\n  error: ShallowRef<boolean>\n  /** 图片原始宽度 */\n  naturalWidth: ShallowRef<number>\n  /** 图片原始高度 */\n  naturalHeight: ShallowRef<number>\n  /** 已加载完成的图片元素，供画布绘制（预览 / getResult 输出） */\n  imageEl: ShallowRef<HTMLImageElement | undefined>\n}\n\n/** 加载 File / Blob / URL 图片源，File / Blob 走 objectURL 并在替换与卸载时释放 */\nexport function useImageLoader(options: UseImageLoaderOptions): UseImageLoaderReturn {\n  const { src } = options\n\n  const imageUrl = shallowRef('')\n  const loaded = shallowRef(false)\n  const error = shallowRef(false)\n  const naturalWidth = shallowRef(0)\n  const naturalHeight = shallowRef(0)\n  const imageEl = shallowRef<HTMLImageElement>()\n\n  let objectUrl: string | undefined\n\n  function revokeObjectUrl() {\n    if (!objectUrl) return\n    URL.revokeObjectURL(objectUrl)\n    objectUrl = undefined\n  }\n\n  function load(source: File | Blob | string | undefined) {\n    revokeObjectUrl()\n    imageUrl.value = ''\n    loaded.value = false\n    error.value = false\n    naturalWidth.value = 0\n    naturalHeight.value = 0\n    imageEl.value = undefined\n\n    if (!source) return\n\n    const url = typeof source === 'string' ? source : (objectUrl = URL.createObjectURL(source))\n    const el = new Image()\n    // URL 源尽量走跨域匿名加载，保证后续画布导出不被污染\n    if (typeof source === 'string') el.crossOrigin = 'anonymous'\n\n    el.onload = () => {\n      naturalWidth.value = el.naturalWidth\n      naturalHeight.value = el.naturalHeight\n      imageEl.value = el\n      loaded.value = true\n    }\n    el.onerror = () => {\n      error.value = true\n      imageUrl.value = ''\n    }\n    el.src = url\n    imageUrl.value = url\n  }\n\n  watch(src, load, { immediate: true })\n\n  onBeforeUnmount(() => {\n    revokeObjectUrl()\n  })\n\n  return { imageUrl, loaded, error, naturalWidth, naturalHeight, imageEl }\n}\n"],"mappings":";;;AAuBA,SAAgB,eAAe,SAAsD;CACnF,MAAM,EAAE,QAAQ;CAEhB,MAAM,WAAW,WAAW,EAAE;CAC9B,MAAM,SAAS,WAAW,KAAK;CAC/B,MAAM,QAAQ,WAAW,KAAK;CAC9B,MAAM,eAAe,WAAW,CAAC;CACjC,MAAM,gBAAgB,WAAW,CAAC;CAClC,MAAM,UAAU,WAA6B;CAE7C,IAAI;CAEJ,SAAS,kBAAkB;EACzB,IAAI,CAAC,WAAW;EAChB,IAAI,gBAAgB,SAAS;EAC7B,YAAY,KAAA;CACd;CAEA,SAAS,KAAK,QAA0C;EACtD,gBAAgB;EAChB,SAAS,QAAQ;EACjB,OAAO,QAAQ;EACf,MAAM,QAAQ;EACd,aAAa,QAAQ;EACrB,cAAc,QAAQ;EACtB,QAAQ,QAAQ,KAAA;EAEhB,IAAI,CAAC,QAAQ;EAEb,MAAM,MAAM,OAAO,WAAW,WAAW,SAAU,YAAY,IAAI,gBAAgB,MAAM;EACzF,MAAM,KAAK,IAAI,MAAM;EAErB,IAAI,OAAO,WAAW,UAAU,GAAG,cAAc;EAEjD,GAAG,eAAe;GAChB,aAAa,QAAQ,GAAG;GACxB,cAAc,QAAQ,GAAG;GACzB,QAAQ,QAAQ;GAChB,OAAO,QAAQ;EACjB;EACA,GAAG,gBAAgB;GACjB,MAAM,QAAQ;GACd,SAAS,QAAQ;EACnB;EACA,GAAG,MAAM;EACT,SAAS,QAAQ;CACnB;CAEA,MAAM,KAAK,MAAM,EAAE,WAAW,KAAK,CAAC;CAEpC,sBAAsB;EACpB,gBAAgB;CAClB,CAAC;CAED,OAAO;EAAE;EAAU;EAAQ;EAAO;EAAc;EAAe;CAAQ;AACzE"}