oxy-uni-ui 1.0.1

package/components/oxy-img-cropper/oxy-img-cropper.vue

@@ -0,0 +1,664 @@
+<template>
+  <!-- 绘制的图片canvas -->
+  <view v-if="modelValue" :class="`oxy-img-cropper ${customClass}`" :style="customStyle" @touchmove="preventTouchMove">
+    <!-- 展示在用户面前的裁剪框 -->
+    <view class="oxy-img-cropper__wrapper">
+      <!-- 画出裁剪框 -->
+      <view class="oxy-img-cropper__cut">
+        <!-- 上方阴影块 -->
+        <view :class="`oxy-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`" :style="`height: ${cutTop}px;`"></view>
+        <view class="oxy-img-cropper__cut--middle" :style="`height: ${cutHeight}px;`">
+          <!-- 左侧阴影块 -->
+          <view
+            :class="`oxy-img-cropper__cut--left ${IS_TOUCH_END ? '' : 'is-hightlight'}`"
+            :style="`width: ${cutLeft}px; height: ${cutHeight}px;`"
+          ></view>
+          <!-- 裁剪框 -->
+          <view class="oxy-img-cropper__cut--body" :style="`width: ${cutWidth}px; height: ${cutHeight}px;`">
+            <!-- 内部网格线 -->
+            <view class="is-gridlines-x"></view>
+            <view class="is-gridlines-y"></view>
+            <!-- 裁剪窗体四个对角 -->
+            <view class="is-left-top"></view>
+            <view class="is-left-bottom"></view>
+            <view class="is-right-top"></view>
+            <view class="is-right-bottom"></view>
+          </view>
+          <!-- 右侧阴影块 -->
+          <view :class="`oxy-img-cropper__cut--right ${IS_TOUCH_END ? '' : 'is-hightlight'}`"></view>
+        </view>
+
+        <!-- 底部阴影块 -->
+        <view :class="`oxy-img-cropper__cut--bottom ${IS_TOUCH_END ? '' : 'is-hightlight'}`"></view>
+      </view>
+      <!-- 展示的传过来的图片: 控制图片的旋转角度(rotate)、缩放程度(imgScale)、移动位置(translate) -->
+      <image
+        :prop="isAnimation"
+        :change:prop="animation ? animation.setAnimation : ''"
+        class="oxy-img-cropper__img"
+        :src="imgSrc"
+        :style="imageStyle"
+        :lazy-load="false"
+        @touchstart="handleImgTouchStart"
+        @touchmove="handleImgTouchMove"
+        @touchend="handleImgTouchEnd"
+        @error="handleImgLoadError"
+        @load="handleImgLoaded"
+      />
+    </view>
+    <!-- 绘制的图片canvas -->
+    <canvas
+      :canvas-id="canvasId"
+      :id="canvasId"
+      class="oxy-img-cropper__canvas"
+      :disable-scroll="true"
+      :style="`width: ${Number(canvasWidth) * canvasScale}px; height: ${Number(canvasHeight) * canvasScale}px;`"
+    />
+    <!-- 下方按钮 -->
+    <view class="oxy-img-cropper__footer">
+      <oxy-icon custom-class="oxy-img-cropper__rotate" v-if="!disabledRotate" name="rotate" @click="handleRotate"></oxy-icon>
+      <view class="oxy-img-cropper__footer--button">
+        <view class="is-cancel" @click="handleCancel">{{ cancelButtonText || translate('cancel') }}</view>
+        <oxy-button size="small" :custom-style="buttonStyle" @click="handleConfirm">{{ confirmButtonText || translate('confirm') }}</oxy-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-img-cropper',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyButton from '../oxy-button/oxy-button.vue'
+import { computed, getCurrentInstance, ref, watch } from 'vue'
+import { addUnit, objToStyle, uuid } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { imgCropperProps, type ImgCropperExpose } from './types'
+
+const canvasId = ref<string>(`cropper${uuid()}`) // canvas 组件的唯一标识符
+
+// 延时动画设置
+let CHANGE_TIME: any | null = null
+// 移动节流
+let MOVE_THROTTLE: any | null = null
+// 节流标志
+let MOVE_THROTTLE_FLAG: boolean = true
+// 图片设置尺寸,此值不变（记录最初设定的尺寸）
+let INIT_IMGWIDTH: null | number | string = null
+// 图片设置尺寸,此值不变（记录最初设定的尺寸）
+let INIT_IMGHEIGHT: null | number | string = null
+// 顶部裁剪框占比
+const TOP_PERCENT = 0.85
+
+const props = defineProps(imgCropperProps)
+const emit = defineEmits(['imgloaded', 'imgloaderror', 'cancel', 'confirm', 'update:modelValue'])
+
+const { translate } = useTranslate('img-cropper')
+
+// 旋转角度
+const imgAngle = ref<number>(0)
+// 是否开启动画
+const isAnimation = ref<boolean>(false)
+// #ifdef MP-ALIPAY || APP-PLUS || H5
+// hack 避免钉钉小程序、支付宝小程序、app抛出相关异常
+const animation: any = null
+// #endif
+
+// 裁剪框的宽高
+const picWidth = ref<number>(0)
+const picHeight = ref<number>(0)
+const cutWidth = ref<number>(0)
+const cutHeight = ref<number>(0)
+const offset = ref<number>(20)
+// 裁剪框的距顶距左
+const cutLeft = ref<number>(0)
+const cutTop = ref<number>(0)
+// canvas最终成像宽高
+const canvasWidth = ref<string | number>('')
+const canvasHeight = ref<string | number>('')
+const canvasScale = ref<number>(2)
+// 当前缩放大小
+const imgScale = ref<number>(1)
+// // 图片宽高
+// imgWidth: null,
+// imgHeight: null,
+// 图片中心轴点距左的距离
+const imgLeft = ref<number>(uni.getSystemInfoSync().windowWidth / 2)
+const imgTop = ref<number>((uni.getSystemInfoSync().windowHeight / 2) * TOP_PERCENT)
+
+const imgInfo = ref<UniApp.GetImageInfoSuccessData | null>(null)
+const info = ref<UniApp.GetSystemInfoResult>(uni.getSystemInfoSync())
+
+// 是否移动中设置 同时控制背景颜色是否高亮
+const IS_TOUCH_END = ref<boolean>(true)
+// 记录移动中的双指位置 [0][1]分别代表两根手指 [1]做待用参数
+const movingPosRecord = ref<Record<string, string | number>[]>([
+  {
+    x: '',
+    y: ''
+  },
+  {
+    x: '',
+    y: ''
+  }
+])
+// 双指缩放时 两个坐标点斜边长度
+const fingerDistance = ref<string | number>('')
+
+const ctx = ref<UniApp.CanvasContext | null>(null)
+
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      INIT_IMGWIDTH = props.imgWidth
+      INIT_IMGHEIGHT = props.imgHeight
+      info.value = uni.getSystemInfoSync()
+
+      // 根据aspectRatio计算裁剪框尺寸
+      const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
+      const tempCutWidth = info.value.windowWidth - offset.value * 2
+      const tempCutHeight = (tempCutWidth * heightRatio) / widthRatio
+
+      cutWidth.value = tempCutWidth
+      cutHeight.value = tempCutHeight
+      cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutHeight) / 2
+      cutLeft.value = offset.value
+
+      canvasScale.value = props.exportScale
+      canvasHeight.value = tempCutHeight
+      canvasWidth.value = tempCutWidth
+
+      // 根据开发者设置的图片目标尺寸计算实际尺寸
+      initImageSize()
+      // 初始化canvas
+      initCanvas()
+      // 加载图片
+      props.imgSrc && loadImg()
+    } else {
+      resetImg()
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.imgSrc,
+  (newValue) => {
+    newValue && loadImg()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => imgAngle.value,
+  (newValue) => {
+    if (newValue % 90) {
+      imgAngle.value = Math.round(newValue / 90) * 90
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => isAnimation.value,
+  (newValue) => {
+    // 开启过渡300毫秒之后自动关闭
+    CHANGE_TIME && clearTimeout(CHANGE_TIME)
+    if (newValue) {
+      CHANGE_TIME = setTimeout(() => {
+        revertIsAnimation(false)
+        clearTimeout(CHANGE_TIME)
+      }, 300)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const buttonStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    position: 'absolute',
+    right: 0,
+    // height: 32px;
+    width: '56px',
+    'border-radius': '16px',
+    'font-size': '16px'
+  }
+
+  return objToStyle(style)
+})
+
+const imageStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    width: picWidth.value ? addUnit(picWidth.value) : 'auto',
+    height: picHeight.value ? addUnit(picHeight.value) : 'auto',
+    transform: `translate(${addUnit(imgLeft.value - picWidth.value / 2)}, ${addUnit(imgTop.value - picHeight.value / 2)}) scale(${
+      imgScale.value
+    }) rotate(${imgAngle.value}deg)`,
+    'transition-duration': (isAnimation.value ? 0.4 : 0) + 's'
+  }
+  return objToStyle(style)
+})
+
+/**
+ * 逆转是否使用动画
+ */
+function revertIsAnimation(animation: boolean | { value: boolean }) {
+  if (typeof animation === 'boolean') {
+    isAnimation.value = animation
+  } else {
+    isAnimation.value = animation.value
+  }
+}
+
+/**
+ * 控制旋转角度
+ * @param angle 角度
+ */
+function setRoate(angle: number) {
+  if (!angle || props.disabledRotate) return
+  revertIsAnimation(true)
+  imgAngle.value = angle
+
+  // 重新计算缩放比例
+  let tempPicWidth = picWidth.value
+  let tempPicHeight = picHeight.value
+
+  // 旋转后宽高互换
+  if ((angle / 90) % 2) {
+    tempPicWidth = picHeight.value
+    tempPicHeight = picWidth.value
+  }
+
+  // 计算新的缩放比例
+  const widthRatio = cutWidth.value / tempPicWidth
+  const heightRatio = cutHeight.value / tempPicHeight
+  imgScale.value = Math.max(widthRatio, heightRatio)
+
+  // 检测边缘位置
+  detectImgPosIsEdge()
+}
+
+/**
+ * 初始化图片的大小和角度以及距离
+ */
+function resetImg() {
+  const { windowHeight, windowWidth } = uni.getSystemInfoSync()
+  imgScale.value = 1
+  imgAngle.value = 0
+  imgLeft.value = windowWidth / 2
+  imgTop.value = (windowHeight / 2) * TOP_PERCENT
+}
+
+/**
+ *  加载图片资源文件，并初始化裁剪框内图片信息
+ */
+function loadImg() {
+  if (!props.imgSrc) return
+
+  uni.getImageInfo({
+    src: props.imgSrc,
+    success: (res) => {
+      // 存储img图片信息
+      imgInfo.value = res
+      // 计算最后图片尺寸
+      computeImgSize()
+      // 初始化尺寸
+      resetImg()
+    },
+    fail: () => {
+      // this.setData({ imgSrc: '' })
+    }
+  })
+}
+
+/**
+ *  设置图片尺寸，使其短边完全显示并填满裁剪框
+ */
+function computeImgSize() {
+  let tempPicWidth: number = picWidth.value
+  let tempPicHeight: number = picHeight.value
+
+  if (!INIT_IMGHEIGHT && !INIT_IMGWIDTH) {
+    // 计算图片与裁剪框的宽高比
+    const imgRatio = imgInfo.value!.width / imgInfo.value!.height
+    const cropRatio = cutWidth.value / cutHeight.value
+
+    if (imgRatio > cropRatio) {
+      // 图片更宽，以高度为准
+      tempPicHeight = cutHeight.value
+      tempPicWidth = tempPicHeight * imgRatio
+    } else {
+      // 图片更高，以宽度为准
+      tempPicWidth = cutWidth.value
+      tempPicHeight = tempPicWidth / imgRatio
+    }
+  } else if (INIT_IMGHEIGHT && !INIT_IMGWIDTH) {
+    tempPicHeight = Number(INIT_IMGHEIGHT)
+    tempPicWidth = (imgInfo.value!.width / imgInfo.value!.height) * tempPicHeight
+  } else if ((!INIT_IMGHEIGHT && INIT_IMGWIDTH) || (INIT_IMGHEIGHT && INIT_IMGWIDTH)) {
+    tempPicWidth = Number(INIT_IMGWIDTH)
+    tempPicHeight = (imgInfo.value!.height / imgInfo.value!.width) * tempPicWidth
+  }
+
+  // 确保计算后的尺寸至少有一边等于裁剪框尺寸
+  const widthRatio = cutWidth.value / tempPicWidth
+  const heightRatio = cutHeight.value / tempPicHeight
+  const scale = Math.max(widthRatio, heightRatio)
+
+  picWidth.value = tempPicWidth
+  picHeight.value = tempPicHeight
+  // 设置初始缩放以适应裁剪框
+  imgScale.value = scale
+}
+
+/**
+ *  canvas 初始化
+ */
+function initCanvas() {
+  if (!ctx.value) {
+    ctx.value = uni.createCanvasContext(canvasId.value, proxy)
+  }
+}
+
+/**
+ *  图片初始化,处理宽高特殊单位
+ */
+function initImageSize() {
+  // 处理宽高特殊单位 %>px
+  if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'string' && INIT_IMGWIDTH.indexOf('%') !== -1) {
+    const width: string = INIT_IMGWIDTH.replace('%', '')
+    INIT_IMGWIDTH = (info.value.windowWidth / 100) * Number(width)
+    picWidth.value = INIT_IMGWIDTH
+  } else if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'number') {
+    picWidth.value = INIT_IMGWIDTH
+  }
+  if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'string' && INIT_IMGHEIGHT.indexOf('%') !== -1) {
+    const height = (props.imgHeight as string).replace('%', '')
+    // INIT_IMGHEIGHT = this.data.imgHeight = (info.value.windowHeight / 100) * Number(height)
+    INIT_IMGHEIGHT = (info.value.windowHeight / 100) * Number(height)
+    picWidth.value = INIT_IMGHEIGHT
+  } else if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'number') {
+    picWidth.value = Number(INIT_IMGWIDTH)
+  }
+}
+
+/**
+ *  图片拖动边缘检测：检测移动或缩放时 是否触碰到图片边缘位置
+ */
+function detectImgPosIsEdge(scale?: number) {
+  const currentScale = scale || imgScale.value
+  let currentImgLeft = imgLeft.value
+  let currentImgTop = imgTop.value
+  let currentPicWidth = picWidth.value
+  let currentPicHeight = picHeight.value
+
+  // 翻转后宽高切换
+  if ((imgAngle.value / 90) % 2) {
+    currentPicWidth = picHeight.value
+    currentPicHeight = picWidth.value
+  }
+  // 左
+  currentImgLeft =
+    (currentPicWidth * currentScale) / 2 + cutLeft.value >= currentImgLeft ? currentImgLeft : (currentPicWidth * imgScale.value) / 2 + cutLeft.value
+  // 右
+  currentImgLeft =
+    cutLeft.value + cutWidth.value - (currentPicWidth * currentScale) / 2 <= currentImgLeft
+      ? currentImgLeft
+      : cutLeft.value + cutWidth.value - (currentPicWidth * currentScale) / 2
+  // 上
+  currentImgTop =
+    (currentPicHeight * currentScale) / 2 + cutTop.value >= currentImgTop ? currentImgTop : (currentPicHeight * currentScale) / 2 + cutTop.value
+  // 下
+  currentImgTop =
+    cutTop.value + cutHeight.value - (currentPicHeight * currentScale) / 2 <= currentImgTop
+      ? currentImgTop
+      : cutTop.value + cutHeight.value - (currentPicHeight * currentScale) / 2
+
+  imgScale.value = currentScale
+  imgTop.value = currentImgTop
+  imgLeft.value = currentImgLeft
+}
+
+/**
+ *  缩放边缘检测：检测移动或缩放时 是否触碰到图片边缘位置
+ */
+function detectImgScaleIsEdge() {
+  let tempPicWidth = picWidth.value
+  let tempPicHeight = picHeight.value
+  let tempImgScale = imgScale.value
+
+  // 翻转后宽高切换
+  if ((imgAngle.value / 90) % 2) {
+    tempPicWidth = picHeight.value
+    tempPicHeight = picWidth.value
+  }
+  if (tempPicWidth * tempImgScale < cutWidth.value) {
+    tempImgScale = cutWidth.value / tempPicWidth
+  }
+  if (tempPicHeight * tempImgScale < cutHeight.value) {
+    tempImgScale = cutHeight.value / tempPicHeight
+  }
+  detectImgPosIsEdge(tempImgScale)
+}
+
+/**
+ *  节流
+ */
+function throttle() {
+  if (info.value.platform === 'android') {
+    MOVE_THROTTLE && clearTimeout(MOVE_THROTTLE)
+    MOVE_THROTTLE = setTimeout(() => {
+      MOVE_THROTTLE_FLAG = true
+    }, 1000 / 40)
+  } else {
+    !MOVE_THROTTLE_FLAG && (MOVE_THROTTLE_FLAG = true)
+  }
+}
+
+/**
+ *  {图片区} 开始拖动
+ */
+function handleImgTouchStart(event: any) {
+  // 如果处于在拖动中，背景为淡色展示全部，拖动结束则为 0.85 透明度
+  IS_TOUCH_END.value = false
+  if (event.touches.length === 1) {
+    // 单指拖动
+    movingPosRecord.value[0] = {
+      x: event.touches[0].clientX - imgLeft.value,
+      y: event.touches[0].clientY - imgTop.value
+    }
+  } else {
+    // 以两指为坐标点 做直角三角形 a2 + b2 = c2
+    const width = Math.abs(event.touches[1].clientX - event.touches[0].clientX)
+    const height = Math.abs(event.touches[1].clientY - event.touches[0].clientY)
+    fingerDistance.value = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+  }
+}
+
+/**
+ *  {图片区} 拖动中
+ */
+function handleImgTouchMove(event: any) {
+  if (IS_TOUCH_END.value || !MOVE_THROTTLE_FLAG) return
+  // 节流
+  throttle()
+  if (event.touches.length === 1) {
+    // 单指拖动
+    const { x, y } = movingPosRecord.value[0]
+    const left = event.touches[0].clientX - Number(x)
+    const top = event.touches[0].clientY - Number(y)
+    imgLeft.value = left
+    imgTop.value = top
+    detectImgPosIsEdge()
+  } else {
+    // 以两指为坐标点 做直角三角形 a2 + b2 = c2
+    const width = Math.abs(event.touches[1].clientX - event.touches[0].clientX)
+    const height = Math.abs(event.touches[1].clientY - event.touches[0].clientY)
+    const hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+    const scale = imgScale.value * (hypotenuse / Number(fingerDistance.value))
+    imgScale.value = Math.min(scale, props.maxScale)
+    detectImgScaleIsEdge()
+    fingerDistance.value = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+  }
+}
+
+/**
+ *  {图片区} 拖动结束
+ */
+function handleImgTouchEnd() {
+  IS_TOUCH_END.value = true
+}
+
+/**
+ *  图片已加载完成
+ */
+function handleImgLoaded(res: any) {
+  emit('imgloaded', res)
+}
+
+/**
+ *  图片加载失败
+ */
+function handleImgLoadError(err: any) {
+  emit('imgloaderror', err)
+}
+
+/**
+ *  旋转图片
+ */
+function handleRotate() {
+  setRoate(imgAngle.value - 90)
+}
+
+/**
+ *  取消裁剪图片
+ */
+function handleCancel() {
+  emit('cancel')
+  emit('update:modelValue', false)
+}
+
+/**
+ *  完成裁剪
+ */
+function handleConfirm() {
+  draw()
+}
+
+/**
+ *  canvas 绘制图片输出成文件类型
+ */
+function canvasToImage() {
+  const { fileType, quality, exportScale } = props
+  uni.canvasToTempFilePath(
+    {
+      width: cutWidth.value * exportScale,
+      height: Math.round(cutHeight.value * exportScale),
+      destWidth: cutWidth.value * exportScale,
+      destHeight: Math.round(cutHeight.value * exportScale),
+      fileType,
+      quality,
+      canvasId: canvasId.value,
+      success: (res: any) => {
+        const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
+        // #ifdef MP-DINGTALK
+        result.tempFilePath = res.filePath
+        // #endif
+        emit('confirm', result)
+      },
+      complete: () => {
+        emit('update:modelValue', false)
+      }
+    },
+    proxy
+  )
+}
+
+/**
+ *  canvas绘制，用canvas模拟裁剪框 对根据图片当前的裁剪信息进行模拟
+ */
+function draw() {
+  if (!props.imgSrc) return
+  const draw = () => {
+    // 图片真实大小
+    const width = picWidth.value * imgScale.value * props.exportScale
+    const height = picHeight.value * imgScale.value * props.exportScale
+    // 取裁剪框和图片的交集
+    const x = imgLeft.value - cutLeft.value
+    const y = imgTop.value - cutTop.value
+    // 如果直接使用canvas绘制的图片会有锯齿，因此需要*设备像素比
+    // 设置（x, y）设置图片在canvas中的位置
+    ctx.value!.translate(x * props.exportScale, y * props.exportScale)
+    // 设置 旋转角度
+    if (!props.disabledRotate) {
+      ctx.value!.rotate((imgAngle.value * Math.PI) / 180)
+    }
+    // drawImage 的 旋转是根据以当前图片的图片水平垂直方向为x、y轴，并在x y轴上移动
+    ctx.value!.drawImage(props.imgSrc, -width / 2, -height / 2, width, height)
+
+    ctx.value!.restore()
+
+    // 绘制图片
+    ctx.value!.draw(false, () => {
+      canvasToImage()
+    })
+  }
+
+  canvasHeight.value = cutHeight.value
+  canvasWidth.value = cutWidth.value
+  draw()
+}
+function preventTouchMove() {}
+
+defineExpose<ImgCropperExpose>({
+  revertIsAnimation,
+  setRoate,
+  resetImg
+})
+</script>
+
+<!-- #ifdef MP-WEIXIN || MP-QQ  -->
+<script module="animation" lang="wxs">
+
+function setAnimation(newValue, oldValue, ownerInstance){
+  if (newValue) {
+    var id = ownerInstance.setTimeout(function() {
+    ownerInstance.callMethod('revertIsAnimation',{value:false})
+    ownerInstance.clearTimeout(id)
+  },300)
+  }
+
+}
+
+module.exports= {
+  setAnimation:setAnimation,
+}
+</script>
+<!-- #endif -->
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>