{"version":3,"file":"cropper-image.vue2.mjs","sources":["../../../../../../packages/components/cropper/src/cropper-image.vue"],"sourcesContent":["<template>\r\n  <a-spin :spinning=\"loading\">\r\n    <div\r\n      :class=\"[bem.b(), props.circled ? bem.is('circled') : '']\"\r\n      :style=\"getWrapperStyle\"\r\n    >\r\n      <img\r\n        v-show=\"isReady\"\r\n        ref=\"imgElRef\"\r\n        :src=\"src\"\r\n        :alt=\"alt\"\r\n        :crossorigin=\"crossorigin\"\r\n        :style=\"getImageStyle\"\r\n        @load=\"handleLoading\"\r\n      />\r\n    </div>\r\n  </a-spin>\r\n</template>\r\n<script lang=\"ts\" setup>\r\nimport {\r\n  onMounted,\r\n  ref,\r\n  computed,\r\n  onUnmounted,\r\n  watch,\r\n  type CSSProperties,\r\n} from 'vue'\r\nimport { createNamespace } from '@ll-plus/utils'\r\n//@ts-ignore\r\nimport Cropper from 'cropperjs'\r\n// import 'cropperjs/dist/cropper.css'\r\nimport { useDebounceFn } from '@vueuse/shared'\r\nimport {\r\n  cropperImageProps,\r\n  cropperImageEmits,\r\n  defaultCropperOptions,\r\n  type CropendResult,\r\n} from './cropper-image'\r\n\r\ndefineOptions({ name: 'CropperImage' })\r\nconst props = defineProps(cropperImageProps)\r\nconst emits = defineEmits(cropperImageEmits)\r\n\r\nconst bem = createNamespace('cropper-image')\r\n\r\nconst imgElRef = ref<HTMLImageElement>()\r\nconst cropper = ref<Cropper>()\r\nconst isReady = ref(false)\r\nconst loading = ref(props.loading)\r\nconst getImageStyle = computed(\r\n  (): CSSProperties => ({\r\n    height: props.height,\r\n    maxWidth: '100%',\r\n    ...props.imageStyle,\r\n  })\r\n)\r\nconst getWrapperStyle = computed(\r\n  (): CSSProperties => ({ height: `${props.height}`.replace(/px/, '') + 'px' })\r\n)\r\n\r\nconst init = async () => {\r\n  const imgEl = imgElRef.value\r\n  if (!imgEl) {\r\n    return\r\n  }\r\n  loading.value = true\r\n  cropper.value = new Cropper(imgEl, {\r\n    ...defaultCropperOptions,\r\n    ready() {\r\n      isReady.value = true\r\n      loading.value = false\r\n      realTimeCroppered()\r\n      //@ts-ignore\r\n      emits('onReady', cropper.value)\r\n    },\r\n    crop() {\r\n      debounceRealTimeCroppered()\r\n    },\r\n    zoom() {\r\n      debounceRealTimeCroppered()\r\n    },\r\n    cropmove() {\r\n      debounceRealTimeCroppered()\r\n    },\r\n    ...props.options,\r\n  })\r\n}\r\n\r\n// Real-time display preview\r\nconst realTimeCroppered = () => {\r\n  props.realTimePreview && croppered()\r\n}\r\n\r\nconst debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80)\r\n\r\n// event: return base64 and width and height information after cropping\r\nconst croppered = () => {\r\n  if (!cropper.value) {\r\n    return\r\n  }\r\n  const imgInfo = cropper.value.getData()\r\n  const canvas = props.circled\r\n    ? getRoundedCanvas()\r\n    : cropper.value.getCroppedCanvas()\r\n  canvas.toBlob((blob) => {\r\n    if (!blob) {\r\n      return\r\n    }\r\n    const fileReader: FileReader = new FileReader()\r\n    fileReader.readAsDataURL(blob)\r\n    fileReader.onloadend = (e) => {\r\n      emits('cropend', {\r\n        imgBase64: e.target?.result ?? '',\r\n        imgInfo,\r\n      } as CropendResult)\r\n    }\r\n    fileReader.onerror = () => {\r\n      emits('cropendError')\r\n    }\r\n  }, 'image/png')\r\n}\r\n\r\n// Get a circular picture canvas\r\nconst getRoundedCanvas = () => {\r\n  const sourceCanvas = cropper.value!.getCroppedCanvas()\r\n  const canvas = document.createElement('canvas')\r\n  const context = canvas.getContext('2d')!\r\n  const width = sourceCanvas.width\r\n  const height = sourceCanvas.height\r\n  canvas.width = width\r\n  canvas.height = height\r\n  context.imageSmoothingEnabled = true\r\n  context.drawImage(sourceCanvas, 0, 0, width, height)\r\n  context.globalCompositeOperation = 'destination-in'\r\n  context.beginPath()\r\n  context.arc(\r\n    width / 2,\r\n    height / 2,\r\n    Math.min(width, height) / 2,\r\n    0,\r\n    2 * Math.PI,\r\n    true\r\n  )\r\n  context.fill()\r\n  return canvas\r\n}\r\n//获取图片加载中\r\nconst handleLoading = () => {\r\n  loading.value = true\r\n}\r\n\r\nonMounted(init)\r\n\r\nonUnmounted(() => {\r\n  cropper.value?.destroy()\r\n})\r\n\r\nwatch(\r\n  () => props.loading,\r\n  (val) => {\r\n    loading.value = val\r\n  }\r\n)\r\n</script>\r\n"],"names":["_createBlock","_createElementVNode","_normalizeClass","_unref","src","alt","crossorigin"],"mappings":"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"}