Sard Uniapp

Appearance

在新窗口打开⤴

CropImage裁剪图片1.12+

介绍 ​

对图片进行裁剪。

引入 ​

js
import CropImage from 'sard-uniapp/components/crop-image/crop-image.vue'
import CropImageAgent from 'sard-uniapp/components/crop-image-agent/crop-image-agent.vue'
import { cropImage } from 'sard-uniapp'

代码演示 ​

基础使用 ​

先在页面放置代理组件。

接着便可以使用 cropImage 方法对图片进行裁剪。

tsx
<sar-crop-image-agent />
vue
<template>
  <sar-button @click="onClick">选择图片</sar-button>

  <image
    :src="url"
    mode="aspectFit"
    style="width: 320rpx; height: 320rpx; margin-top: 20rpx"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { cropImage } from 'sard-uniapp'

const url = ref('')

const onClick = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      cropImage({
        src: res.tempFilePaths[0],
        success(filePath) {
          url.value = filePath
        },
      })
    },
  })
}
</script>
vue
<template>
  <sar-button @click="onClick">选择图片</sar-button>

  <image
    :src="url"
    mode="aspectFit"
    style="width: 320rpx; height: 320rpx; margin-top: 20rpx"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
import { cropImage } from "sard-uniapp";
const url = ref("");
const onClick = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success(res) {
      cropImage({
        src: res.tempFilePaths[0],
        success(filePath) {
          url.value = filePath;
        }
      });
    }
  });
};
</script>

裁剪比例 ​

可以通过 cropScale 属性设置任意比例。

vue
<template>
  <sar-button @click="onClick">选择图片</sar-button>

  <image
    :src="url"
    mode="aspectFit"
    style="width: 320rpx; height: 320rpx; margin-top: 20rpx"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { cropImage } from 'sard-uniapp'

const url = ref('')

const onClick = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      cropImage({
        src: res.tempFilePaths[0],
        cropScale: '16:9',
        success(filePath) {
          url.value = filePath
        },
      })
    },
  })
}
</script>
vue
<template>
  <sar-button @click="onClick">选择图片</sar-button>

  <image
    :src="url"
    mode="aspectFit"
    style="width: 320rpx; height: 320rpx; margin-top: 20rpx"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
import { cropImage } from "sard-uniapp";
const url = ref("");
const onClick = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success(res) {
      cropImage({
        src: res.tempFilePaths[0],
        cropScale: "16:9",
        success(filePath) {
          url.value = filePath;
        }
      });
    }
  });
};
</script>

修改裁剪尺寸 ​

可以通过 beforeCrop 方法修改裁剪尺寸，接收实际宽高，通过返回缩放比例来修改裁剪大小。

vue
<template>
  <sar-button @click="onClick">选择图片</sar-button>

  <image
    :src="url"
    mode="aspectFit"
    :style="{
      width: width + 'px',
      height: height + 'px',
      marginTop: '20rpx',
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { cropImage } from 'sard-uniapp'

const url = ref('')

const width = ref(0)
const height = ref(0)

const onClick = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      cropImage({
        src: res.tempFilePaths[0],
        beforeCrop() {
          return 0.3
        },
        success(filePath, info) {
          url.value = filePath
          width.value = info.width
          height.value = info.height
        },
      })
    },
  })
}
</script>
vue
<template>
  <sar-button @click="onClick">选择图片</sar-button>

  <image
    :src="url"
    mode="aspectFit"
    :style="{
      width: width + 'px',
      height: height + 'px',
      marginTop: '20rpx',
    }"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
import { cropImage } from "sard-uniapp";
const url = ref("");
const width = ref(0);
const height = ref(0);
const onClick = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success(res) {
      cropImage({
        src: res.tempFilePaths[0],
        beforeCrop() {
          return 0.3;
        },
        success(filePath, info) {
          url.value = filePath;
          width.value = info.width;
          height.value = info.height;
        }
      });
    }
  });
};
</script>

API ​

CropImageProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
visible是否显示裁剪弹框booleanfalse
src要裁剪的图片stringfalse
crop-scale裁剪的比例string'1:1'
type导出图片类型'png' | 'jpg''png'
quality导出图片的质量number0.92
duration弹窗显隐过渡时间（单位 ms）number150
success裁剪成功回调(filePath: string) => void-
fail裁剪失败回调(err: any) => void-
complete裁剪成功或失败回调() => void-
cancel 1.23+点击取消按钮时触发() => void-
before-crop裁剪前回调，可以修改裁剪的尺寸；接收宽高，返回缩放比例(width: number, height: number) => number-

CropImageEmits ​

事件描述类型
update:visible弹出框显隐时触发(visible: boolean) => void
visible-hook 1.22.1+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.22.1+入场动画开始前触发() => void
enter 1.22.1+入场动画开始时触发() => void
after-enter 1.22.1+入场动画结束时触发() => void
enter-cancelled 1.22.1+入场动画取消时触发() => void
before-leave 1.22.1+退场动画开始前触发() => void
leave 1.22.1+退场动画开始时触发() => void
after-leave 1.22.1+退场动画结束时触发() => void
leave-cancelled 1.22.1+退场动画取消时触发() => void

CropImageAgentProps / CropImageOptions ​

继承 CropImageProps 并有以下额外属性。

属性描述类型默认值
id裁剪组件的 idstring'cropImage'

命令式方法 ​

名称描述类型
cropImage裁剪图片(options: CropImageOptions) => void

Released under the MIT License.

Copyright © 2023-present wuzhitao