<template>
<div>
<button @click="cropImage">裁剪图片</button>
<img :src="croppedImage" mode="aspectFit" style="margin-top: 20px" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Taro from "@tarojs/taro";
const croppedImage = ref("");
const cropImage = () => {
//打开相册或摄像头
Taro.chooseImage({
success: (res) => {
const originalImagePath = res.tempFilePaths[0];
// 使用微信提供的裁剪功能
Taro.editImage({
filePath: originalImagePath, // 之前选择的图片路径
// 其他裁剪参数
success: (res) => {
const croppedImagePath = res.tempFilePath;
// 将裁剪后的图片路径更新到croppedImage变量中,在页面上显示裁剪后的图片
croppedImage.value = croppedImagePath;
},
});
},
});
};
</script>
Taro 文档因为做小程序比较少,之前一直没找到这个API 微信有提供相册裁剪的接口。