Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 d63d8923 编写于 作者: DCloud_iOS_WZT's avatar DCloud_iOS_WZT
浏览文件
操作

update chooseImage、chooseVideo添加pageOrientation测试例

上级 41860ab9
隐藏空白更改
内联 并排
Showing with 129 addition and 92 deletion
pages/API/choose-image/choose-image.uvue
浏览文件 @ d63d8923
...@@ -32,7 +32,17 @@ ...@@ -32,7 +32,17 @@
<input class="click-t" :value="countIndex+1" type="number" :maxlength="1" @confirm="chooseImageCount" <input class="click-t" :value="countIndex+1" type="number" :maxlength="1" @confirm="chooseImageCount"
confirm-type="done" /> confirm-type="done" />
</view> </view>
</view> </view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
屏幕方向
</view>
<view class="uni-list-cell-right" @click="chooseOrientationType">
<text class="click-t">{{orientationType[orientationTypeIndex]}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd"> <view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label"> <view class="uni-list-cell-left uni-label">
图像裁剪 图像裁剪
...@@ -111,6 +121,11 @@ ...@@ -111,6 +121,11 @@
['compressed'], ['compressed'],
['original'], ['original'],
['compressed', 'original'] ['compressed', 'original']
]
var orientationTypeArray = [
'portrait',
'landscape',
'auto'
] ]
export default { export default {
data() { data() {
...@@ -120,7 +135,9 @@ ...@@ -120,7 +135,9 @@
sourceTypeIndex: 2, sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'], sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2, sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'], sizeType: ['压缩', '原图', '压缩或原图'],
orientationTypeIndex: 0,
orientationType: ['竖屏', '横屏', '自动'],
countIndex: 8, countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9], count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
isCrop: false, isCrop: false,
...@@ -136,7 +153,9 @@ ...@@ -136,7 +153,9 @@
this.sourceType = ['拍照', '相册', '拍照或相册'] this.sourceType = ['拍照', '相册', '拍照或相册']
this.sizeTypeIndex = 2 this.sizeTypeIndex = 2
this.sizeType = ['压缩', '原图', '压缩或原图'] this.sizeType = ['压缩', '原图', '压缩或原图']
this.countIndex = 8 this.countIndex = 8
this.orientationTypeIndex = 0
this.orientationType = ['竖屏', '横屏', '自动']
}, },
methods: { methods: {
cropHeightConfim(e : InputConfirmEvent) { cropHeightConfim(e : InputConfirmEvent) {
...@@ -196,6 +215,14 @@ ...@@ -196,6 +215,14 @@
this.sizeTypeIndex = e.tapIndex! this.sizeTypeIndex = e.tapIndex!
} }
}) })
},
chooseOrientationType(){
uni.showActionSheet({
itemList: ['竖屏', '横屏', '自动'],
success: (e) => {
this.orientationTypeIndex = e.tapIndex!
}
})
}, },
chooseImageCount(event : InputConfirmEvent) { chooseImageCount(event : InputConfirmEvent) {
let count = parseInt(event.detail.value) - 1 let count = parseInt(event.detail.value) - 1
...@@ -221,7 +248,8 @@ ...@@ -221,7 +248,8 @@
sourceType: sourceTypeArray[this.sourceTypeIndex], sourceType: sourceTypeArray[this.sourceTypeIndex],
sizeType: sizeTypeArray[this.sizeTypeIndex], sizeType: sizeTypeArray[this.sizeTypeIndex],
crop: this.isCrop ? { "quality": this.cropPercent, "width": this.cropWidth, "height": this.cropHeight, "resize": this.cropResize } as ChooseImageCropOptions : null, crop: this.isCrop ? { "quality": this.cropPercent, "width": this.cropWidth, "height": this.cropHeight, "resize": this.cropResize } as ChooseImageCropOptions : null,
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex], count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
pageOrientation: orientationTypeArray[this.orientationTypeIndex],
success: (res) => { success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths); this.imageList = this.imageList.concat(res.tempFilePaths);
}, },
......
pages/API/choose-video/choose-video.uvue
浏览文件 @ d63d8923
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex:1"> <scroll-view style="flex:1">
<!-- #endif --> <!-- #endif -->
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<video class="video" :src="src" :controls="true"></video> <video class="video" :src="src" :controls="true"></video>
<view class="uni-title"> <view class="uni-title">
<text class="uni-subtitle-text">视频信息</text> <text class="uni-subtitle-text">视频信息</text>
</view> </view>
<text>{{videoInfo}}</text> <text>{{videoInfo}}</text>
<view class="uni-btn-v"> <view class="uni-btn-v">
<button type="primary" @click="chooseVideo">选取视频</button> <button type="primary" @click="chooseVideo">选取视频</button>
</view> </view>
<enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data> <enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data>
<enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data> <enum-data title="屏幕方向" :items="orientationTypeItemTypes" @change="onOrientationTypeChange"></enum-data>
</view> <enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data>
<input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data> </view>
<!-- #ifdef APP --> <input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data>
<view class="uni-padding-wrap"> <!-- #ifdef APP -->
<boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data> <view class="uni-padding-wrap">
</view> <boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data>
<!-- #endif --> </view>
<!-- #ifdef APP --> <!-- #endif -->
</scroll-view> <!-- #ifdef APP -->
<!-- #endif --> </scroll-view>
</template> <!-- #endif -->
</template>
<script>
import { ItemType } from '@/components/enum-data/enum-data'; <script>
type Camera = "back" | "front" import { ItemType } from '@/components/enum-data/enum-data-types';
type Source = "album" | "camera" type Camera = "back" | "front"
export default { type Source = "album" | "camera"
data() { export default {
return { data() {
title: "chooseVideo", return {
title: "chooseVideo",
src: "", src: "",
sourceTypeItemTypes: [{ "value": 0, "name": "从相册中选择视频" }, { "value": 1, "name": "拍摄视频" }, { "value": 2, "name": "从相册中选择视频或拍摄视频" }] as ItemType[], orientationTypeItemTypes: [{ "value": 0, "name": "竖屏" }, { "value": 1, "name": "横屏" }, { "value": 2, "name": "自动" }] as ItemType[],
sourceTypeItems: [["album"], ["camera"], ["album", "camera"]] as Source[][], sourceTypeItemTypes: [{ "value": 0, "name": "从相册中选择视频" }, { "value": 1, "name": "拍摄视频" }, { "value": 2, "name": "从相册中选择视频或拍摄视频" }] as ItemType[],
cameraItemTypes: [{ "value": 0, "name": "后置摄像头" }, { "value": 1, "name": "前置摄像头" }] as ItemType[], sourceTypeItems: [["album"], ["camera"], ["album", "camera"]] as Source[][],
cameraItems: ["back", "front"] as Camera[], cameraItemTypes: [{ "value": 0, "name": "后置摄像头" }, { "value": 1, "name": "前置摄像头" }] as ItemType[],
cameraItems: ["back", "front"] as Camera[],
sourceType: ["album", "camera"] as Source[], sourceType: ["album", "camera"] as Source[],
compressed: true, orientationType: "portrait",
maxDuration: 60, orientationTypeItems: ["portrait", "landscape", "auto"],
camera: "back" as Camera, compressed: true,
videoInfo: "" maxDuration: 60,
} camera: "back" as Camera,
}, videoInfo: ""
methods: { }
chooseVideo() { },
uni.chooseVideo({ methods: {
sourceType: this.sourceType, chooseVideo() {
// #ifdef APP uni.chooseVideo({
sourceType: this.sourceType,
// #ifdef APP
compressed: this.compressed, compressed: this.compressed,
// #endif pageOrientation: this.orientationType,
// #endif
maxDuration: this.maxDuration, maxDuration: this.maxDuration,
camera: this.camera,
success: (res) => { camera: this.camera,
console.log("chooseVideo success", JSON.stringify(res)); success: (res) => {
this.src = res.tempFilePath; console.log("chooseVideo success", JSON.stringify(res));
this.videoInfo = `视频长度: ${res.duration}s\n视频大小: ${Math.ceil(res.size / 1024)}KB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n`; this.src = res.tempFilePath;
}, this.videoInfo = `视频长度: ${res.duration}s\n视频大小: ${Math.ceil(res.size / 1024)}KB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n`;
fail: (err) => { },
uni.showModal({ fail: (err) => {
title: "选择视频失败", uni.showModal({
content: JSON.stringify(err), title: "选择视频失败",
showCancel: false content: JSON.stringify(err),
}); showCancel: false
} });
}); }
});
}, },
onSourceTypeChange(value : number) { onOrientationTypeChange(value : number) {
this.sourceType = this.sourceTypeItems[value]; this.orientationType = this.orientationTypeItems[value];
}, },
onCompressedChange(value : boolean) { onSourceTypeChange(value : number) {
this.compressed = value; this.sourceType = this.sourceTypeItems[value];
}, },
onMaxDurationConfirm(value : number) { onCompressedChange(value : boolean) {
this.maxDuration = value; this.compressed = value;
}, },
onCameraChange(value : number) { onMaxDurationConfirm(value : number) {
this.camera = this.cameraItems[value]; this.maxDuration = value;
} },
} onCameraChange(value : number) {
} this.camera = this.cameraItems[value];
</script> }
}
<style> }
.video { </script>
align-self: center;
width: 300px; <style>
height: 225px; .video {
} align-self: center;
</style> width: 300px;
height: 225px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或