marking-cet-web/src/modules/example/ImageModify.vue

<template>
  <div class="flex direction-column full">
    <mark-header :exclude-operations="['delete', 'bookmark']" @click="onOperationClick"> </mark-header>
    <div class="flex-1 overflow-hidden p-base mark-container">
      <div
        class="p-base radius-base full fill-blank scroll-auto mark-content"
        :class="{ 'text-center': center }"
        :style="{ 'background-color': backgroundColor }"
      >
        <span class="preview" @click="onPreview">
          <svg-icon name="preview"></svg-icon>
        </span>
        <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
      </div>
    </div>
  </div>
  <image-preview v-model="previewModalVisible" :url="MockImg"></image-preview>
</template>

<script setup lang="ts" name="ImageModify">
import { computed, ref } from 'vue'
import { useSetImgBg } from '@/hooks/useSetImgBg'
import useMarkHeader from '@/hooks/useMarkHeader'
import MarkHeader from '@/components/shared/MarkHeader.vue'
import ImagePreview from '@/components/shared/ImagePreview.vue'
import SvgIcon from '@/components/common/SvgIcon.vue'
import MockImg from '@/assets/mock/SAMPA-1.jpg'

import type { SetImgBgOption } from '@/hooks/useSetImgBg'
import type { MarkHeaderInstance } from 'global-type'

/** 图片预览 */
const previewModalVisible = ref<boolean>(false)

const {
  rotate,
  scale,
  center,
  frontColor,
  backgroundColor,
  onBack,
  onScaleChange,
  onCenter,
  onRotate,
  setBackgroundColor,
  setFrontColor,
  onViewSample,
  onViewStandard,
} = useMarkHeader()

/** 预览试卷 */
const onPreview = () => {
  previewModalVisible.value = true
}

type OperationClick = MarkHeaderInstance['onClick']

type OperationType = Parameters<Exclude<OperationClick, undefined>>[0]['type']

const operationHandles: Partial<Record<OperationType, (...args: any) => void>> = {
  back: onBack,
  'scale-change': onScaleChange,
  center: onCenter,
  rotate: onRotate,
  'front-color': setFrontColor,
  'background-color': setBackgroundColor,
  example: onViewSample,
  standard: onViewStandard,
}

const onOperationClick: OperationClick = ({ type, value }) => {
  operationHandles[type]?.(value)
}

const imgOption = computed<SetImgBgOption>(() => {
  return {
    image: MockImg,
    rotate: rotate.value,
    scale: scale.value,
  }
})

const { drawing, dataUrl } = useSetImgBg(imgOption)
</script>

<style scoped lang="scss">
.canvas {
  // width: 400px;
  // height: 400px;
}

.image {
  width: 400px;
  // height: 400px;

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}
</style>