Tuniao UI Uniapp V3图鸟 UI vue3 uniapp 插件 - 图片裁剪
该组件一般用于展示图标用作丰富内容的场景
仓库地址
组件安装
bash
npm i tnuiv3p-tn-image-cropnpm i tnuiv3p-tn-image-cropbash
pnpm add tnuiv3p-tn-image-croppnpm add tnuiv3p-tn-image-cropbash
yarn i tnuiv3p-tn-image-cropyarn i tnuiv3p-tn-image-crop组件位置
typescript
import TnImageCrop from 'tnuiv3p-tn-image-crop/index.vue'import TnImageCrop from 'tnuiv3p-tn-image-crop/index.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
该组件默认取用户设置的容器的宽高，然后根据宽高的比例设置裁剪框的尺寸，组件并不是全屏的，所以需要用户自己设置容器的宽高
- 通过
src传递待裁剪的图片地址 - 设置
circle设置是否裁剪后的图片为圆形
vue
<script setup lang="ts">
const image = 'https://resource.tuniaokj.com/images/content/rodion.jpg'
</script>
<template>
<view class="content">
<TnImageCrop :src="image" />
</view>
</template>
<style>
.content {
position: relative;
width: 100%;
height: 100vh;
}
</style><script setup lang="ts">
const image = 'https://resource.tuniaokj.com/images/content/rodion.jpg'
</script>
<template>
<view class="content">
<TnImageCrop :src="image" />
</view>
</template>
<style>
.content {
position: relative;
width: 100%;
height: 100vh;
}
</style>获取裁剪后的图片
- 通过调用组件的
save方法，可以获取裁剪后的图片的临时地址或者 base64 的数据
save方法传递一个options参数来设置对应生成图片的参数
options 属性说明
| 属性名称 | 属性说明 | 属性类型 | 默认值 |
|---|---|---|---|
| base64 | 返回 base64 格式的图片，H5 端默认返回 base64 格式 | boolean | false |
| cropRatio | 裁剪后的图片与原图片的比例, 范围 0 ~ 1 | number | 1 |
| quality | 裁剪后图片的质量, 范围 0 ~ 1 | number | 1 |
vue
<script setup lang="ts">
import { ref } from 'vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import type { TnImageCropInstance } from 'tnuiv3p-tn-image-crop'
const imageCropRef = ref<TnImageCropInstance>()
const image = 'https://resource.tuniaokj.com/images/content/rodion.jpg'
// 获取裁剪后的图片
const saveImage = async () => {
const imageData = await imageCropRef.value?.save({
base64: false,
})
// eslint-disable-next-line no-console
console.log(imageData)
}
</script>
<template>
<view class="content">
<TnImageCrop :src="image" />
</view>
<view class="button">
<TnButton size="xl" @click="saveImage">保存图片</TnButton>
</view>
</template>
<style>
.content {
position: relative;
width: 100%;
height: 100vh;
}
.button {
position: fixed;
z-index: 1000;
left: 50%;
bottom: 50rpx;
transform: translate(-50%, -50%);
}
</style><script setup lang="ts">
import { ref } from 'vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import type { TnImageCropInstance } from 'tnuiv3p-tn-image-crop'
const imageCropRef = ref<TnImageCropInstance>()
const image = 'https://resource.tuniaokj.com/images/content/rodion.jpg'
// 获取裁剪后的图片
const saveImage = async () => {
const imageData = await imageCropRef.value?.save({
base64: false,
})
// eslint-disable-next-line no-console
console.log(imageData)
}
</script>
<template>
<view class="content">
<TnImageCrop :src="image" />
</view>
<view class="button">
<TnButton size="xl" @click="saveImage">保存图片</TnButton>
</view>
</template>
<style>
.content {
position: relative;
width: 100%;
height: 100vh;
}
.button {
position: fixed;
z-index: 1000;
left: 50%;
bottom: 50rpx;
transform: translate(-50%, -50%);
}
</style>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| src | 图片地址 | String | - | - |
| circle | 圆形裁剪框 | Boolean | false | true |
| border-color | 裁剪框边框颜色，以 tn 开头使用图鸟内置的颜色 | String | #fff | 边框颜色 |
| bg-color | 容器背景颜色，以 tn 开头使用图鸟内置的颜色 | String | rgba(0, 0, 0, 0.5) | 背景颜色 |
| z-index | zIndex | Number | 100 | - |
| min-scale | 最小缩放系数 | Number | 0.5 | - |
| max-scale | 最大缩放系数 | Number | 2 | - |
Expose
| 函数名 | 函数说明 | 函数类型 |
|---|---|---|
| save | 保存图片 | (options?: GenerateImageOption) => Promise<string> |
GenerateImageOption
| 属性名称 | 属性说明 | 属性类型 | 默认值 |
|---|---|---|---|
| base64 | 返回 base64 格式的图片，H5 端默认返回 base64 格式 | boolean | false |
| cropRatio | 裁剪后的图片与原图片的比例, 范围 0 ~ 1 | number | 1 |
| quality | 裁剪后图片的质量, 范围 0 ~ 1 | number | 1 |