tnuiv3p-tn-image-crop v1.0.5

图鸟 UI vue3 uniapp Plugins - 图片裁剪

Tuniao UI vue3官方仓库

该组件适用于用户选择图片之后，对图片进行裁剪，裁剪完成之后，返回裁剪后的图片临时地址或者base64的数据

组件安装

npm i tnuiv3p-tn-image-crop

组件位置

import TnImageCrop from 'tnuiv3p-tn-image-crop/index.vue'

平台差异说明

基础使用

该组件默认取用户设置的容器的宽高，然后根据宽高的比例设置裁剪框的尺寸，组件并不是全屏的，所以需要用户自己设置容器的宽高

• 通过src传递待裁剪的图片地址
• 设置circle设置是否裁剪后的图片为圆形

<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属性说明

<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

Expose

GenerateImageOption