135 行
4.3 KiB
Plaintext
135 行
4.3 KiB
Plaintext
<template>
|
|
<!-- #ifdef APP && !VUE3-VAPOR -->
|
|
<scroll-view style="flex:1">
|
|
<!-- #endif -->
|
|
<page-head :title="title"></page-head>
|
|
<view class="uni-padding-wrap">
|
|
<view class="uni-title">
|
|
<text class="uni-subtitle-text">获取本地相对路径图片信息</text>
|
|
</view>
|
|
<image class="image" :src="relativeImagePath" mode="aspectFit"></image>
|
|
<text class="margin-top-10">{{absoluteImageInfo}}</text>
|
|
<view class="uni-title">
|
|
<text class="uni-subtitle-text">获取网络路径图片信息</text>
|
|
</view>
|
|
<image class="image" :src="remoteImagePath" mode="aspectFit"></image>
|
|
<text class="margin-top-10">{{remoteImageInfo}}</text>
|
|
<view class="uni-title">
|
|
<text class="uni-subtitle-text">获取本地绝对路径图片信息</text>
|
|
</view>
|
|
<image class="image" :src="absoluteImagePath" mode="aspectFit"></image>
|
|
<text class="margin-top-10">{{relativeImageInfo}}</text>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="chooseImage">拍摄照片或从相册中选择照片</button>
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef APP && !VUE3-VAPOR -->
|
|
</scroll-view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
type TestStateType = {
|
|
imageInfoForTest: UTSJSONObject | null,
|
|
autoTest: boolean
|
|
}
|
|
|
|
const title = ref("getImageInfo")
|
|
const relativeImagePath = ref("/static/test-image/logo.png")
|
|
const relativeImageInfo = ref("")
|
|
const absoluteImagePath = ref("")
|
|
const absoluteImageInfo = ref("")
|
|
const remoteImagePath = ref("https://request.dcloud.net.cn/api/http/contentType/image/png")
|
|
const remoteImageInfo = ref("")
|
|
// 自动化测试
|
|
const testState = reactive({
|
|
imageInfoForTest: null as UTSJSONObject | null,
|
|
autoTest: false
|
|
} as TestStateType)
|
|
|
|
const chooseImage = () => {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
absoluteImagePath.value = res.tempFilePaths[0];
|
|
uni.getImageInfo({
|
|
src: res.tempFilePaths[0],
|
|
success: (_res) => {
|
|
console.log("getImageInfo success", JSON.stringify(_res));
|
|
relativeImageInfo.value = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n图片路径: ${_res.path}\n图片方向: ${_res.orientation}\n图片格式: ${_res.type}`;
|
|
},
|
|
fail: (err) => {
|
|
uni.showModal({
|
|
title: "获取图片信息失败",
|
|
content: JSON.stringify(err),
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
onLoad((options : OnLoadOptions) => {
|
|
testState.autoTest = options['autoTest'] == 'true'
|
|
})
|
|
|
|
onReady(() => {
|
|
uni.getImageInfo({
|
|
src: relativeImagePath.value,
|
|
success: (res) => {
|
|
console.log("getImageInfo success", JSON.stringify(res));
|
|
absoluteImageInfo.value = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
|
|
testState.imageInfoForTest = {
|
|
"width": res.width,
|
|
"height": res.height,
|
|
"path": res.path.slice(res.path.indexOf('static/') + 'static/'.length),
|
|
"orientation": res.orientation,
|
|
"type": res.type
|
|
};
|
|
},
|
|
fail: (err) => {
|
|
uni.showModal({
|
|
title: "获取图片信息失败",
|
|
content: JSON.stringify(err),
|
|
showCancel: false
|
|
});
|
|
testState.imageInfoForTest = null;
|
|
}
|
|
});
|
|
uni.getImageInfo({
|
|
src: remoteImagePath.value,
|
|
success: (res) => {
|
|
console.log("getImageInfo success", JSON.stringify(res));
|
|
if (testState.autoTest) {
|
|
remoteImageInfo.value = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
|
|
} else {
|
|
remoteImageInfo.value = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
uni.showModal({
|
|
title: "获取图片信息失败",
|
|
content: JSON.stringify(err),
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
})
|
|
|
|
defineExpose({
|
|
testState,
|
|
chooseImage
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.image {
|
|
align-self: center;
|
|
}
|
|
|
|
.margin-top-10 {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|