cabloy 5.1.136 → 5.1.138

package/zova/src/suite/cabloy-basic/modules/basic-image/src/component/imageUploader/controller.tsx

@@ -0,0 +1,386 @@
+import type { TableIdentity } from 'table-identity';
+import type { VNode } from 'vue';
+import type { IComponentOptions } from 'zova';
+import type { IImageSceneRecord } from 'zova-module-a-openapi';
+
+import { BeanControllerBase, ClientOnly, Use } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { prepareImageFile } from 'zova-module-basic-image';
+
+import type { IImageCropDialogLabels, IImageResizeOptions } from '../../lib/imageTransform.js';
+
+import { ModelImage } from '../../model/image.js';
+
+export interface IImageUploaderResult {
+  id: TableIdentity;
+  url?: string;
+  filename?: string;
+  contentType?: string;
+  size?: number;
+  width?: number;
+  height?: number;
+  public?: boolean;
+  signed?: boolean;
+}
+
+export interface IImageUploaderPolicyState {
+  acceptAttr: string;
+  multiple: boolean;
+  pending: boolean;
+}
+
+export interface IImageUploaderRenderState {
+  isUploading: boolean;
+  errorMessage?: string;
+  policy: IImageUploaderPolicyState;
+  chooseFiles: () => void;
+  clear: () => void;
+  onError: (error: Error) => void;
+}
+
+export interface ControllerImageUploaderProps {
+  imageScene: keyof IImageSceneRecord | string;
+  previewUrl?: string;
+  emptyPreviewUrl?: string;
+  accept?: string | string[];
+  mimeTypes?: string[];
+  extensions?: string[];
+  maxSize?: number;
+  minSize?: number;
+  multiple?: boolean;
+  onBeforeUpload?: (fileCount: number, policy: IImageUploaderPolicyState) => string | undefined;
+  previewAlt?: string;
+  previewShape?: 'rect' | 'round';
+  chooseText?: string;
+  clearText?: string;
+  crop?: {
+    labels: IImageCropDialogLabels;
+    aspectRatio?: number;
+    shape?: 'rect' | 'round';
+  };
+  resize?: IImageResizeOptions;
+  slotDefault?: (state: IImageUploaderRenderState) => VNode;
+  onUploaded?: (result: IImageUploaderResult) => void;
+  onUploadedBatch?: (results: IImageUploaderResult[], policy: IImageUploaderPolicyState) => void;
+  onCleared?: () => void;
+  onError?: (error: Error) => void;
+}
+
+@Controller()
+export class ControllerImageUploader extends BeanControllerBase {
+  static $propsDefault = {};
+  static $componentOptions: IComponentOptions = { inheritAttrs: false };
+
+  fileInputRef?: HTMLInputElement;
+  isUploading = false;
+  errorMessage?: string;
+  private _failedPreviewUrl?: string;
+  private _generation = 0;
+
+  @Use()
+  $$modelImage: ModelImage;
+
+  protected render() {
+    const props = this.$props as ControllerImageUploaderProps;
+    const policy = this._getUploadPolicyState(props);
+    const state: IImageUploaderRenderState = {
+      isUploading: this.isUploading,
+      errorMessage: this.errorMessage,
+      policy,
+      chooseFiles: () => void this._chooseFiles(props),
+      clear: () => this._clear(props),
+      onError: error => this._setError(error, props),
+    };
+    return (
+      <>
+        <ClientOnly>
+          <input
+            ref={ref => {
+              this.fileInputRef = ref as HTMLInputElement;
+            }}
+            class="hidden"
+            type="file"
+            accept={policy.acceptAttr}
+            multiple={policy.multiple}
+            disabled={this.isUploading || policy.pending}
+            onChange={event => void this._handleFileChange(event, props)}
+          />
+        </ClientOnly>
+        {props.slotDefault?.(state) ?? this._renderDefault(props, state)}
+      </>
+    );
+  }
+
+  private _renderDefault(props: ControllerImageUploaderProps, state: IImageUploaderRenderState) {
+    const previewUrl = this._getPreviewUrl(props);
+    const previewClass = props.previewShape === 'rect' ? 'rounded-box' : 'rounded-full';
+    return (
+      <div class="flex items-center gap-4">
+        <img
+          class={`h-16 w-16 object-cover ${previewClass}`}
+          src={previewUrl}
+          alt={props.previewAlt ?? 'image'}
+          onError={event => this._handlePreviewError(event, props, previewUrl)}
+        />
+        <div class="flex flex-wrap gap-2">
+          <button
+            class={
+              state.isUploading || state.policy.pending
+                ? 'btn btn-outline btn-sm btn-disabled'
+                : 'btn btn-outline btn-sm'
+            }
+            type="button"
+            disabled={state.isUploading || state.policy.pending}
+            onClick={state.chooseFiles}
+          >
+            {props.chooseText ?? this.scope.locale.SelectImage()}
+          </button>
+          <button
+            class="btn btn-outline btn-sm"
+            type="button"
+            disabled={state.isUploading}
+            onClick={state.clear}
+          >
+            {props.clearText ?? this.scope.locale.RemoveImage()}
+          </button>
+        </div>
+        {state.errorMessage && (
+          <p role="alert" class="basis-full text-sm text-error">
+            {state.errorMessage}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  private _getPreviewUrl(props: ControllerImageUploaderProps) {
+    const previewUrl = props.previewUrl || props.emptyPreviewUrl;
+    if (previewUrl === this._failedPreviewUrl) return props.emptyPreviewUrl;
+    return previewUrl;
+  }
+
+  private _handlePreviewError(
+    _event: Event,
+    props: ControllerImageUploaderProps,
+    previewUrl: string | undefined,
+  ) {
+    if (!previewUrl || previewUrl === props.emptyPreviewUrl) return;
+    this._failedPreviewUrl = previewUrl;
+  }
+
+  private _getUploadPolicyQuery(props: ControllerImageUploaderProps) {
+    return this.$$modelImage.getUploadPolicy(props.imageScene as string);
+  }
+
+  private _getUploadPolicyState(props: ControllerImageUploaderProps): IImageUploaderPolicyState {
+    const query = this._getUploadPolicyQuery(props);
+    const policy = query?.data;
+    return {
+      acceptAttr: this._getAcceptAttr(props, policy),
+      multiple: this._getEffectiveMultiple(props, policy),
+      pending: !!query && query.data === undefined && !!(query.isPending || query.isFetching),
+    };
+  }
+
+  private _getCachedUploadPolicy(props: ControllerImageUploaderProps) {
+    return this._getUploadPolicyQuery(props)?.data;
+  }
+
+  private async _waitForUploadPolicy(props: ControllerImageUploaderProps) {
+    await $QueryEnsureLoaded(() => this._getUploadPolicyQuery(props));
+  }
+
+  private async _chooseFiles(props: ControllerImageUploaderProps) {
+    if (this.isUploading) return;
+    try {
+      await this._waitForUploadPolicy(props);
+      if (this.isUploading) return;
+      const policy = this._getUploadPolicyState(props);
+      if (policy.pending) return;
+      this.fileInputRef?.click();
+    } catch (error: unknown) {
+      const normalizedError = this._normalizeError(error);
+      this.errorMessage = normalizedError.message || this.scope.locale.ImageUploadFailed();
+      this._setError(normalizedError, props);
+    }
+  }
+
+  private async _handleFileChange(event: Event, props: ControllerImageUploaderProps) {
+    const input = event.target as HTMLInputElement;
+    const files = Array.from(input.files ?? []);
+    input.value = '';
+    if (files.length === 0 || this.isUploading) return;
+    const generation = ++this._generation;
+    this.errorMessage = undefined;
+    this.isUploading = true;
+    try {
+      await this._waitForUploadPolicy(props);
+      if (generation !== this._generation) return;
+      const multiple = this._getEffectiveMultiple(props);
+      const policyState = this._getUploadPolicyState(props);
+      const beforeUploadError = props.onBeforeUpload?.(files.length, policyState);
+      if (beforeUploadError) throw new Error(beforeUploadError);
+      const filesToUpload = multiple ? files : files.slice(0, 1);
+      const results: IImageUploaderResult[] = [];
+      for (const file of filesToUpload) {
+        const validationError = this._validateFile(file, props);
+        if (validationError) throw new Error(validationError);
+        const preparedFile = await prepareImageFile(file, {
+          appModal: this.$appModal,
+          crop: props.crop,
+          resize: props.resize,
+        });
+        if (generation !== this._generation) return;
+        if (!preparedFile) continue;
+        const preparedValidationError = this._validateFile(preparedFile, props);
+        if (preparedValidationError) throw new Error(preparedValidationError);
+        const result = await this._uploadPreparedFile(
+          preparedFile,
+          file,
+          props,
+          !!this._getCachedUploadPolicy(props)?.directUpload,
+        );
+        if (generation !== this._generation) return;
+        results.push(result);
+      }
+      if (results.length === 0 || generation !== this._generation) return;
+      for (const result of results) props.onUploaded?.(result);
+      props.onUploadedBatch?.(results, policyState);
+    } catch (error: unknown) {
+      if (generation !== this._generation) return;
+      this._setError(this._normalizeError(error), props);
+    } finally {
+      if (generation === this._generation) this.isUploading = false;
+    }
+  }
+
+  private async _uploadPreparedFile(
+    preparedFile: File,
+    sourceFile: File,
+    props: ControllerImageUploaderProps,
+    directUpload: boolean,
+  ): Promise<IImageUploaderResult> {
+    const imageScene = props.imageScene;
+    if (!imageScene) throw new Error(this.scope.locale.ImageUploadSceneRequired());
+    if (!directUpload) {
+      return await this.scope.api.image.upload({ imageScene, image: preparedFile });
+    }
+    const directUploadRes = await this.scope.api.image.createDirectUpload({
+      imageScene,
+      filename: preparedFile.name,
+      size: preparedFile.size,
+      mimeType: preparedFile.type || sourceFile.type,
+    });
+    const formData = new FormData();
+    formData.append('file', preparedFile);
+    const providerRes = await fetch(directUploadRes.uploadUrl, {
+      method: 'POST',
+      body: formData,
+    });
+    if (!providerRes.ok) {
+      throw new Error(`image direct upload failed: ${providerRes.status}`);
+    }
+    return await this.scope.api.image.finalizeDirectUpload({ imageId: directUploadRes.id });
+  }
+
+  private _clear(props: ControllerImageUploaderProps) {
+    if (this.isUploading) return;
+    this._generation++;
+    this.errorMessage = undefined;
+    props.onCleared?.();
+  }
+
+  private _setError(error: Error, props: ControllerImageUploaderProps) {
+    this.errorMessage = error.message || this.scope.locale.ImageUploadFailed();
+    props.onError?.(error);
+  }
+
+  private _getEffectiveMultiple(
+    props: ControllerImageUploaderProps,
+    policy = this._getCachedUploadPolicy(props),
+  ) {
+    return !!policy?.multiple && props.multiple !== false;
+  }
+
+  private _getAcceptAttr(
+    props: ControllerImageUploaderProps,
+    policy = this._getCachedUploadPolicy(props),
+  ) {
+    const parts = [
+      ...this._getExplicitAcceptTokens(props),
+      ...(policy?.mimeTypes ?? []),
+      ...(policy?.extensions ?? []),
+    ];
+    return parts.length > 0 ? parts.join(',') : 'image/*';
+  }
+
+  private _validateFile(file: File, props: ControllerImageUploaderProps) {
+    if (file.size === 0) return this.scope.locale.ImageUploadFailed();
+    const explicitTokens = this._getExplicitAcceptTokens(props);
+    const policy = this._getCachedUploadPolicy(props);
+    const policyTokens = [...(policy?.mimeTypes ?? []), ...(policy?.extensions ?? [])];
+    if (!this._matchesImageFile(file)) return this.scope.locale.InvalidImageType();
+    if (explicitTokens.length > 0 && !this._matchesAccept(file, explicitTokens)) {
+      return this.scope.locale.InvalidImageType();
+    }
+    if (policyTokens.length > 0 && !this._matchesAccept(file, policyTokens)) {
+      return this.scope.locale.InvalidImageType();
+    }
+    const maxSize = this._getMaxSize(props, policy?.maxSize);
+    if (maxSize !== undefined && file.size > maxSize) {
+      return this.scope.locale.ImageTooLarge(this._formatBytes(maxSize));
+    }
+    if (props.minSize !== undefined && file.size < props.minSize) {
+      return this.scope.locale.ImageTooSmall(this._formatBytes(props.minSize));
+    }
+    return undefined;
+  }
+
+  private _getExplicitAcceptTokens(props: ControllerImageUploaderProps) {
+    const accept = props.accept
+      ? Array.isArray(props.accept)
+        ? props.accept
+        : props.accept.split(',')
+      : [];
+    return [...accept, ...(props.mimeTypes ?? []), ...(props.extensions ?? [])]
+      .map(item => item.trim().toLowerCase())
+      .filter(Boolean);
+  }
+
+  private _getMaxSize(props: ControllerImageUploaderProps, policyMaxSize?: number) {
+    if (props.maxSize === undefined) return policyMaxSize;
+    if (policyMaxSize === undefined) return props.maxSize;
+    return Math.min(props.maxSize, policyMaxSize);
+  }
+
+  private _matchesImageFile(file: File) {
+    return file.type.toLowerCase().startsWith('image/');
+  }
+
+  private _matchesAccept(file: File, tokens: string[]) {
+    const mimeType = file.type.toLowerCase();
+    const extension = this._getFileExtension(file.name);
+    return tokens.some(token => {
+      if (token === 'image/*') return mimeType.startsWith('image/');
+      if (token.startsWith('.')) return extension === token;
+      if (token.endsWith('/*')) return mimeType.startsWith(token.slice(0, -1));
+      return mimeType === token;
+    });
+  }
+
+  private _getFileExtension(filename: string) {
+    const index = filename.lastIndexOf('.');
+    return index === -1 ? '' : filename.slice(index).toLowerCase();
+  }
+
+  private _normalizeError(error: unknown) {
+    return error instanceof Error ? error : new Error(String(error));
+  }
+
+  private _formatBytes(size: number) {
+    if (size < 1024) return `${size} B`;
+    if (size < 1024 * 1024) return `${Math.ceil(size / 1024)} KB`;
+    return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-image/src/config/locale/en-us.ts

@@ -7,6 +7,7 @@ export default {
   ImageTooLarge: 'Image size exceeds the limit: {0}',
   ImageTooSmall: 'Image size is smaller than the limit: {0}',
   ImageUploadFailed: 'Image upload failed',
+  ImageUploadSceneRequired: 'Image upload scene is required',
   InvalidImageType: 'Unsupported image type',
   NoImageSelected: 'No image selected',
   PreviewImage: 'Preview',

package/zova/src/suite/cabloy-basic/modules/basic-image/src/config/locale/zh-cn.ts

@@ -7,6 +7,7 @@ export default {
   ImageTooLarge: '图片大小超过限制：{0}',
   ImageTooSmall: '图片大小小于限制：{0}',
   ImageUploadFailed: '图片上传失败',
+  ImageUploadSceneRequired: '必须指定图片上传场景',
   InvalidImageType: '图片类型不受支持',
   NoImageSelected: '尚未选择图片',
   PreviewImage: '预览',

package/zova/src/suite/cabloy-basic/modules/basic-image/src/lib/imageTransform.tsx

@@ -0,0 +1,296 @@
+import type { CropperResult } from 'vue-advanced-cropper';
+
+import { nextTick, reactive } from 'vue';
+import { CircleStencil, Cropper, RectangleStencil } from 'vue-advanced-cropper';
+import { ClientOnly } from 'zova';
+
+import type { IImageTransformOptions } from '../types/image.js';
+import 'vue-advanced-cropper/dist/style.css';
+
+export interface IImageResizeOptions {
+  width?: number;
+  height?: number;
+  fit?: 'scale-down' | 'contain' | 'cover' | 'crop' | 'pad';
+  background?: string;
+  quality?: number;
+  format?: IImageTransformOptions['format'];
+}
+
+export interface IImageCropDialogLabels {
+  title: string;
+  adjust: string;
+  cancel: string;
+  apply: string;
+}
+
+export interface IImageCropDialogOptions {
+  appModal: {
+    dialog(options: Record<string, any>, config?: Record<string, any>): unknown;
+  };
+  labels: IImageCropDialogLabels;
+  aspectRatio?: number;
+  shape?: 'rect' | 'round';
+}
+
+export interface IPrepareImageFileOptions {
+  appModal?: IImageCropDialogOptions['appModal'];
+  crop?: Omit<IImageCropDialogOptions, 'appModal'>;
+  resize?: IImageResizeOptions;
+}
+
+export async function prepareImageFile(file: File, options: IPrepareImageFileOptions) {
+  if (!process.env.CLIENT) return file;
+  let canvas: HTMLCanvasElement | undefined;
+  if (options.crop && options.appModal) {
+    canvas = await openImageCropDialog(file, {
+      appModal: options.appModal,
+      ...options.crop,
+    });
+    if (!canvas) return undefined;
+  }
+  const resizeOptions = options.resize;
+  if (!canvas && !resizeOptions) return file;
+  const sourceCanvas = canvas ?? (await createCanvasFromFile(file));
+  const targetCanvas = resizeCanvas(sourceCanvas, resizeOptions);
+  return await canvasToFile(targetCanvas, file, resizeOptions);
+}
+
+export async function openImageCropDialog(
+  file: File,
+  options: IImageCropDialogOptions,
+): Promise<HTMLCanvasElement | undefined> {
+  const src = URL.createObjectURL(file);
+  try {
+    return await new Promise<HTMLCanvasElement | undefined>(resolve => {
+      let settled = false;
+      let cropperResult: CropperResult | undefined;
+      let cropperRef: { getResult?: () => CropperResult } | undefined;
+      const dialogState = reactive({ applying: false });
+      const dialog = options.appModal.dialog(
+        {
+          title: options.labels.title,
+          slotDefault: () => (
+            <ClientOnly>
+              <div class="space-y-4">
+                <div class="h-105 overflow-hidden rounded-box bg-base-200">
+                  <Cropper
+                    ref={ref => {
+                      cropperRef = ref as any;
+                      if (cropperRef?.getResult) {
+                        cropperResult = cropperRef.getResult();
+                      }
+                    }}
+                    class="h-full w-full"
+                    src={src}
+                    canvas={true}
+                    debounce={0}
+                    stencilComponent={options.shape === 'round' ? CircleStencil : RectangleStencil}
+                    stencilProps={{ aspectRatio: options.aspectRatio }}
+                    imageRestriction="stencil"
+                    onReady={() => {
+                      cropperResult = cropperRef?.getResult?.();
+                    }}
+                    onChange={(result: CropperResult) => {
+                      cropperResult = result;
+                    }}
+                  ></Cropper>
+                </div>
+                <p class="text-sm text-base-content/70">{options.labels.adjust}</p>
+              </div>
+            </ClientOnly>
+          ),
+          slotActions: (modal: { close: () => void }) => (
+            <>
+              <button
+                type="button"
+                class="btn btn-ghost"
+                onClick={() => {
+                  if (settled) return;
+                  settled = true;
+                  modal.close();
+                  resolve(undefined);
+                }}
+              >
+                {options.labels.cancel}
+              </button>
+              <button
+                type="button"
+                class={dialogState.applying ? 'btn btn-primary btn-disabled' : 'btn btn-primary'}
+                disabled={dialogState.applying}
+                onClick={() => {
+                  if (settled || dialogState.applying) return;
+                  dialogState.applying = true;
+                  void nextTick(async () => {
+                    if (settled) return;
+                    const canvas = await waitForCropCanvas(
+                      () => cropperResult?.canvas ?? cropperRef?.getResult?.()?.canvas,
+                    );
+                    if (!canvas || settled) {
+                      dialogState.applying = false;
+                      return;
+                    }
+                    settled = true;
+                    modal.close();
+                    resolve(canvas);
+                  });
+                }}
+              >
+                {options.labels.apply}
+              </button>
+            </>
+          ),
+          onClose: () => {
+            if (settled) return;
+            settled = true;
+            resolve(undefined);
+          },
+        },
+        {
+          maxWidth: 960,
+          showCloseButton: true,
+          closeOnBackdrop: false,
+        },
+      );
+      void dialog;
+    });
+  } finally {
+    URL.revokeObjectURL(src);
+  }
+}
+
+async function waitForCropCanvas(
+  getCanvas: () => HTMLCanvasElement | undefined,
+  attempts = 10,
+): Promise<HTMLCanvasElement | undefined> {
+  for (let index = 0; index < attempts; index++) {
+    const canvas = getCanvas();
+    if (canvas) return canvas;
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+  }
+  return undefined;
+}
+
+export async function createCanvasFromFile(file: File) {
+  const src = URL.createObjectURL(file);
+  try {
+    return await createCanvasFromUrl(src);
+  } finally {
+    URL.revokeObjectURL(src);
+  }
+}
+
+export async function createCanvasFromUrl(src: string) {
+  const image = await loadImage(src);
+  const canvas = document.createElement('canvas');
+  canvas.width = image.naturalWidth || image.width;
+  canvas.height = image.naturalHeight || image.height;
+  const context = canvas.getContext('2d');
+  if (!context) throw new Error('image canvas is unavailable');
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+
+export function resizeCanvas(sourceCanvas: HTMLCanvasElement, resizeOptions?: IImageResizeOptions) {
+  if (!resizeOptions?.width && !resizeOptions?.height) return sourceCanvas;
+  const sourceWidth = sourceCanvas.width;
+  const sourceHeight = sourceCanvas.height;
+  const fallbackRatio = sourceWidth / Math.max(sourceHeight, 1);
+  const targetWidth =
+    resizeOptions.width ?? Math.round((resizeOptions.height ?? sourceHeight) * fallbackRatio);
+  const targetHeight =
+    resizeOptions.height ?? Math.round(targetWidth / Math.max(fallbackRatio, 0.0001));
+  const canvas = document.createElement('canvas');
+  canvas.width = targetWidth;
+  canvas.height = targetHeight;
+  const context = canvas.getContext('2d');
+  if (!context) return sourceCanvas;
+  if (resizeOptions.background) {
+    context.fillStyle = resizeOptions.background;
+    context.fillRect(0, 0, targetWidth, targetHeight);
+  }
+  const fit = resizeOptions.fit ?? 'cover';
+  if (fit === 'cover' || fit === 'crop') {
+    const scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
+    const width = sourceWidth * scale;
+    const height = sourceHeight * scale;
+    const left = (targetWidth - width) / 2;
+    const top = (targetHeight - height) / 2;
+    context.drawImage(sourceCanvas, left, top, width, height);
+    return canvas;
+  }
+  const scaleContain = Math.min(targetWidth / sourceWidth, targetHeight / sourceHeight);
+  const scale = fit === 'scale-down' ? Math.min(1, scaleContain) : scaleContain;
+  const width = sourceWidth * scale;
+  const height = sourceHeight * scale;
+  const left = (targetWidth - width) / 2;
+  const top = (targetHeight - height) / 2;
+  context.drawImage(sourceCanvas, left, top, width, height);
+  return canvas;
+}
+
+export async function canvasToFile(
+  canvas: HTMLCanvasElement,
+  file: File,
+  resizeOptions?: IImageResizeOptions,
+) {
+  const mimeType = resolveMimeType(file.type, resizeOptions?.format);
+  const quality = resolveQuality(resizeOptions?.quality);
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      result => {
+        if (!result) {
+          reject(new Error('image encoding failed'));
+          return;
+        }
+        resolve(result);
+      },
+      mimeType,
+      quality,
+    );
+  });
+  return new File([blob], replaceExtension(file.name, mimeType), {
+    type: mimeType,
+    lastModified: Date.now(),
+  });
+}
+
+export function resolveMimeType(
+  fileType: string | undefined,
+  format?: IImageTransformOptions['format'],
+) {
+  if (format === 'jpeg') return 'image/jpeg';
+  if (format === 'png') return 'image/png';
+  if (format === 'webp') return 'image/webp';
+  if (format === 'avif') return 'image/avif';
+  if (fileType && fileType.startsWith('image/')) return fileType;
+  return 'image/jpeg';
+}
+
+export function resolveQuality(quality?: number) {
+  if (quality === undefined) return 0.92;
+  if (quality > 1) return Math.min(quality / 100, 1);
+  return quality;
+}
+
+export function replaceExtension(filename: string, mimeType: string) {
+  const ext =
+    mimeType === 'image/png'
+      ? '.png'
+      : mimeType === 'image/webp'
+        ? '.webp'
+        : mimeType === 'image/avif'
+          ? '.avif'
+          : '.jpg';
+  const index = filename.lastIndexOf('.');
+  if (index === -1) return `${filename}${ext}`;
+  return `${filename.slice(0, index)}${ext}`;
+}
+
+export function loadImage(src: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('image loading failed'));
+    image.src = src;
+  });
+}

package/zova/src/suite/cabloy-basic/modules/basic-image/src/lib/index.ts

@@ -1,2 +1,3 @@
+export * from './imageTransform.js';
 export * from './preview.js';
 export * from './previewDialog.js';