92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
<template>
|
||
<view>
|
||
<qf-image-cropper :src="data.src" :width="196" :height="230" :radius="0" @crop="handleCrop"
|
||
:reverseRotatable="true"></qf-image-cropper>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
watch,
|
||
nextTick,
|
||
getCurrentInstance
|
||
} from "vue";
|
||
import {
|
||
onLoad,
|
||
onShow,
|
||
onReady,
|
||
onPullDownRefresh,
|
||
onReachBottom
|
||
} from "@dcloudio/uni-app";
|
||
const {
|
||
appContext,
|
||
proxy
|
||
} = getCurrentInstance();
|
||
const data = reactive({
|
||
src: ""
|
||
})
|
||
onLoad((option) => {
|
||
console.log(option)
|
||
data.src = option.src
|
||
})
|
||
|
||
function handleCrop(e) {
|
||
uni.showLoading({
|
||
title:"抠图中"
|
||
})
|
||
convertLocalImageToFile(e.tempFilePath).then(file => {
|
||
proxy.$imageUpload(file.split(',', 2)[1]).then(resimage => {
|
||
uni.hideLoading()
|
||
// editForm.value.photo = decodeURI(resimage.data);
|
||
uni.$emit("editFormPhoto", decodeURI(resimage.data))
|
||
uni.navigateBack()
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
console.log(err.data.message)
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "图片不是人像或者过大"
|
||
})
|
||
})
|
||
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
// uni.saveFile({
|
||
// tempFilePath: e.tempFilePath,
|
||
// success: function(res) {
|
||
// console.log(res)
|
||
// // res.avatar = res.savedFilePath
|
||
// }
|
||
// });
|
||
}
|
||
/**
|
||
* 将本地图片路径通过 Canvas 转换为 File 对象
|
||
* @param {string} localPath - 本地图片路径（如从 uni.chooseImage 获取的 tempFilePath）
|
||
* @param {Object} options - 可选参数
|
||
* @param {string} options.format - 输出格式 'image/png' 或 'image/jpeg'，默认 'image/png'
|
||
* @param {number} options.quality - 图片质量（仅 jpeg 有效），0~1，默认 0.92
|
||
* @param {number} options.maxWidth - 最大宽度（等比缩放），不填则使用原图尺寸
|
||
* @param {number} options.maxHeight - 最大高度（等比缩放），不填则使用原图尺寸
|
||
* @returns {Promise<File>} 返回一个 Promise，resolve 为 File 对象
|
||
*/
|
||
function convertLocalImageToFile(localPath) {
|
||
return new Promise((resolve, reject) => {
|
||
// 1. 读取本地图片为 Base64（避免 Image 对象直接加载本地路径的兼容问题）
|
||
plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
|
||
entry.file((file) => {
|
||
const reader = new plus.io.FileReader();
|
||
reader.onload = (e) => {
|
||
const base64Data = e.target.result; // 格式如 data:image/jpeg;base64,/9j/...
|
||
resolve(e.target.result)
|
||
};
|
||
reader.onerror = (err) => reject(err);
|
||
reader.readAsDataURL(file); // 读取为 DataURL
|
||
}, reject);
|
||
}, reject);
|
||
|
||
});
|
||
}
|
||
</script> |