Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5704
Star 81
Fork 152
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 12cdf3ca 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng
浏览文件
操作

更新media示例

上级 c95ade3c
隐藏空白更改
内联 并排
Showing with 326 addition and 66 deletion
pages.json
浏览文件 @ 12cdf3ca
......@@ -615,7 +615,7 @@
{
"path": "pages/API/choose-image/choose-image",
"style": {
"navigationBarTitleText": "图片"
"navigationBarTitleText": "拍摄图片或从相册中选择图片"
}
},
// #ifdef APP-ANDROID
......@@ -635,13 +635,13 @@
},
// #endif
// #ifdef APP
// {
// "path" : "pages/API/choose-video/choose-video",
// "style" :
// {
// "navigationBarTitleText" : "拍摄视频或从相册中选择视频"
// }
// },
{
"path" : "pages/API/choose-video/choose-video",
"style" :
{
"navigationBarTitleText" : "拍摄视频或从相册中选择视频"
}
},
{
"path" : "pages/API/save-video-to-photos-album/save-video-to-photos-album",
"style" :
......@@ -658,13 +658,13 @@
"navigationBarTitleText" : "获取视频信息"
}
},
// {
// "path" : "pages/API/compress-video/compress-video",
// "style" :
// {
// "navigationBarTitleText" : "压缩视频"
// }
// },
{
"path" : "pages/API/compress-video/compress-video",
"style" :
{
"navigationBarTitleText" : "压缩视频"
}
},
// #endif
{
"path": "pages/API/get-network-type/get-network-type",
......
pages/API/choose-image/choose-image.uvue
浏览文件 @ 12cdf3ca
......@@ -113,7 +113,7 @@
export default {
data() {
return {
title: 'choose/previewImage',
title: 'chooseImage',
imageList: [] as Array<string>,
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
......
pages/API/choose-video/choose-video.uvue 0 → 100644
浏览文件 @ 12cdf3ca
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<video class="video" :src="src"></video>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">选取视频</button>
</view>
<enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data>
<enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data>
<input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data>
<boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import { ItemType } from '@/components/enum-data/enum-data'
export default {
data() {
return {
title: "chooseVideo",
src: "",
sourceTypeItemTypes: [{ "value": 0, "name": "从相册中选择视频" }, { "value": 1, "name": "拍摄视频" }, { "value": 2, "name": "从相册中选择视频或拍摄视频" }] as ItemType[],
sourceTypeItems: [["album"], ["camera"], ["album", "camera"]],
cameraItemTypes: [{ "value": 0, "name": "后置摄像头" }, { "value": 1, "name": "前置摄像头" }] as ItemType[],
cameraItems: ["back", "front"],
sourceType: ["album", "camera"],
compressed: true,
maxDuration: 60,
camera: "back"
}
},
methods: {
chooseVideo() {
uni.chooseVideo({
sourceType: this.sourceType,
compressed: this.compressed,
maxDuration: this.maxDuration,
camera: this.camera,
// extension: ['mp4'],
success: (res) => {
console.log("chooseVideo success", JSON.stringify(res));
this.src = res.tempFilePath;
},
fail: (err) => {
uni.showModal({
title: "选择视频失败",
content: JSON.stringify(err),
showCancel: false
});
}
})
},
onSourceTypeChange(value : number) {
this.sourceType = this.sourceTypeItems[value];
},
onCompressedChange(value : boolean) {
this.compressed = value;
},
onMaxDurationConfirm(value : number) {
this.maxDuration = value;
},
onCameraChange(value : number) {
this.camera = this.cameraItems[value];
}
}
}
</script>
<style>
.video {
align-self: center;
}
</style>
pages/API/compress-image/compress-image.uvue
浏览文件 @ 12cdf3ca
......@@ -24,14 +24,12 @@
</view>
</view>
<input-data defaultValue="80" title="压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）" type="number"
@confirm="onQualityInputConfirm"></input-data>
<input-data title="压缩后图片的宽度，单位px" type="number" @confirm="onCompressedWidthInputConfirm"></input-data>
<input-data title="压缩后图片的高度，单位px" type="number" @confirm="onCompressedHeightInputConfirm"></input-data>
<input-data defaultValue="auto" title="压缩后图片的宽度，支持px、%、auto" type="string"
@confirm="onWidthInputConfirm"></input-data>
<input-data defaultValue="auto" title="压缩后图片的高度，支持px、%、auto" type="string"
@confirm="onHeightInputConfirm"></input-data>
<input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateInputConfirm"></input-data>
@confirm="onQualityConfirm"></input-data>
<input-data title="压缩后图片的宽度，单位px" type="number" @confirm="onCompressedWidthConfirm"></input-data>
<input-data title="压缩后图片的高度，单位px" type="number" @confirm="onCompressedHeightConfirm"></input-data>
<input-data defaultValue="auto" title="压缩后图片的宽度，支持px、%、auto" type="string" @confirm="onWidthConfirm"></input-data>
<input-data defaultValue="auto" title="压缩后图片的高度，支持px、%、auto" type="string" @confirm="onHeightConfirm"></input-data>
<input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
......@@ -56,6 +54,16 @@
},
methods: {
compressImage() {
if (this.beforeCompressPath == "") {
uni.showToast({
title: "请先选择图片",
icon: "error"
});
return;
}
uni.showLoading({
title: "图片压缩中"
});
uni.compressImage({
src: this.beforeCompressPath,
quality: this.quality,
......@@ -64,24 +72,29 @@
width: this.width,
height: this.height,
rotate: this.rotate,
success: (_res) => {
this.afterCompressPath = _res.tempFilePath;
success: (res) => {
console.log("compressImage success", JSON.stringify(res));
this.afterCompressPath = res.tempFilePath;
uni.showToast({
title: "压缩成功",
icon: null
});
uni.getImageInfo({
src: _res.tempFilePath,
success: (res) => {
this.afterCompressImageInfo = `图片宽度: ${res.width}, 图片高度: ${res.height}`;
src: res.tempFilePath,
success: (_res) => {
this.afterCompressImageInfo = `图片宽度: ${_res.width}, 图片高度: ${_res.height}`;
}
});
},
fail: (err) => {
uni.showModal({
title: "压缩失败",
content: JSON.stringify(err)
})
title: "压缩图片失败",
content: JSON.stringify(err),
showCancel: false
});
},
complete: (_) => {
uni.hideLoading();
}
})
},
......@@ -90,33 +103,33 @@
count: 1,
sizeType: ["original"],
sourceType: ["album"],
success: (_res) => {
this.beforeCompressPath = _res.tempFilePaths[0];
success: (res) => {
this.beforeCompressPath = res.tempFilePaths[0];
uni.getImageInfo({
src: _res.tempFilePaths[0],
success: (res) => {
this.beforeCompressImageInfo = `图片宽度: ${res.width}, 图片高度: ${res.height}`;
src: res.tempFilePaths[0],
success: (_res) => {
this.beforeCompressImageInfo = `图片宽度: ${_res.width}, 图片高度: ${_res.height}`;
}
});
}
});
},
onQualityInputConfirm(value : number) {
onQualityConfirm(value : number) {
this.quality = value;
},
onCompressedWidthInputConfirm(value : number) {
onCompressedWidthConfirm(value : number) {
this.compressedWidth = value;
},
onCompressedHeightInputConfirm(value : number) {
onCompressedHeightConfirm(value : number) {
this.compressedHeight = value;
},
onWidthInputConfirm(value : string) {
onWidthConfirm(value : string) {
this.width = value;
},
onHeightInputConfirm(value : string) {
onHeightConfirm(value : string) {
this.height = value;
},
onRotateInputConfirm(value : number) {
onRotateConfirm(value : number) {
this.rotate = value;
}
}
......
pages/API/compress-video/compress-video.uvue 0 → 100644
浏览文件 @ 12cdf3ca
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<video class="video" :src="src"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前视频信息</text>
</view>
<text>{{beforeCompressVideoInfo}}</text>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后视频信息</text>
</view>
<text>{{afterCompressVideoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressVideo">压缩视频</button>
</view>
</view>
<input-data :defaultValue="null" title="压缩质量，low(低) medium(中) high(高)" type="string"
@confirm="onQualityConfirm"></input-data>
<!-- <input-data :defaultValue="null" title="码率，单位kbps" type="number" @confirm="onBitrateConfirm"></input-data> -->
<!-- <input-data :defaultValue="null" title="帧率" type="number" @confirm="onFpsConfirm"></input-data> -->
<input-data :defaultValue="null" title="相对于原视频的分辨率比例，取值范围(0, 1]" type="string"
@confirm="onResolutionConfirm"></input-data>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: "compressVideo",
src: "",
beforeCompressVideoInfo: "",
afterCompressVideoInfo: "",
beforeCompressPath: "",
afterCompressPath: "",
quality: null as string | null,
bitrate: null as number | null,
fps: null as number | null,
resolution: null as number | null,
}
},
methods: {
compressVideo() {
if (this.beforeCompressPath == "") {
uni.showToast({
title: "请先选择视频",
icon: "error"
});
return;
}
uni.showLoading({
title: "视频压缩中"
});
uni.compressVideo({
src: this.beforeCompressPath,
quality: this.quality,
resolution: this.resolution,
success: (res) => {
console.log("compressVideo success", JSON.stringify(res));
this.src = res.tempFilePath;
uni.showToast({
title: "压缩成功",
icon: null
});
uni.getVideoInfo({
src: res.tempFilePath,
success: (_res) => {
this.afterCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
}
});
},
fail: (err) => {
uni.showModal({
title: "压缩视频失败",
content: JSON.stringify(err),
showCancel: false
});
},
complete: (_) => {
uni.hideLoading();
}
});
},
chooseVideo() {
uni.chooseVideo({
sourceType: ["album"],
compressed: false,
success: (res) => {
this.beforeCompressPath = res.tempFilePath;
this.src = res.tempFilePath;
uni.getVideoInfo({
src: res.tempFilePath,
success: (_res) => {
this.beforeCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
}
});
}
});
},
onQualityConfirm(value : string) {
this.quality = value;
},
onBitrateConfirm(value : number) {
this.bitrate = value;
},
onFpsConfirm(value : number) {
this.fps = value;
},
onResolutionConfirm(value : string) {
this.resolution = parseFloat(value);
}
}
}
</script>
<style>
.video {
align-self: center;
}
.image-container {
flex-direction: row;
}
</style>
pages/API/get-image-info/get-image-info.uvue
浏览文件 @ 12cdf3ca
......@@ -45,12 +45,20 @@
chooseImage() {
uni.chooseImage({
count: 1,
success: (_res) => {
this.absoluteImagePath = _res.tempFilePaths[0];
success: (res) => {
this.absoluteImagePath = res.tempFilePaths[0];
uni.getImageInfo({
src: _res.tempFilePaths[0],
success: (res) => {
this.relativeImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
src: res.tempFilePaths[0],
success: (_res) => {
console.log("getImageInfo success", JSON.stringify(res));
this.relativeImageInfo = `图片宽度: ${_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
});
}
});
}
......@@ -61,13 +69,29 @@
uni.getImageInfo({
src: this.relativeImagePath,
success: (res) => {
console.log("getImageInfo success", JSON.stringify(res));
this.absoluteImageInfo = `图片宽度: ${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
});
}
});
uni.getImageInfo({
src: this.remoteImagePath,
success: (res) => {
console.log("getImageInfo success", JSON.stringify(res));
this.remoteImageInfo = `图片宽度: ${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
});
}
});
}
......
pages/API/get-video-info/get-video-info.uvue
浏览文件 @ 12cdf3ca
......@@ -31,12 +31,20 @@
chooseVideo() {
uni.chooseVideo({
compressed: false,
success: (_res) => {
this.absoluteVideoPath = _res.tempFilePath;
success: (res) => {
this.absoluteVideoPath = res.tempFilePath;
uni.getVideoInfo({
src: _res.tempFilePath,
success: (res) => {
this.absoluteVideoInfo = `视频画面方向: ${res.orientation}\n视频格式: ${res.type}\n视频长度: ${res.duration}s\n视频大小: ${Math.ceil(res.size / 1024)}kB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n视频帧率: ${res.fps}fps\n视频码率: ${res.bitrate}kbps`;
src: res.tempFilePath,
success: (_res) => {
console.log("getVideoInfo success", JSON.stringify(res));
this.absoluteVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
},
fail: (err) => {
uni.showModal({
title: "获取视频信息失败",
content: JSON.stringify(err),
showCancel: false
});
}
});
}
......
pages/API/save-image-to-photos-album/save-image-to-photos-album.uvue
浏览文件 @ 12cdf3ca
......@@ -23,16 +23,18 @@
saveImage() {
uni.saveImageToPhotosAlbum({
filePath: "/static/uni.png",
success() {
success: (res) => {
console.log("saveImageToPhotosAlbum success", JSON.stringify(res));
uni.showToast({
position: "center",
icon: "none",
title: "图片保存成功，请到手机相册查看"
})
},
fail(e) {
fail: (err) => {
uni.showModal({
content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
title: "保存图片到相册失败",
content: JSON.stringify(err),
showCancel: false
});
}
......
pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue
浏览文件 @ 12cdf3ca
......@@ -25,15 +25,17 @@
uni.saveVideoToPhotosAlbum({
filePath: this.src,
success: (_) => {
console.log("saveVideoToPhotosAlbum success");
uni.showToast({
position: "center",
icon: "none",
title: "视频保存成功，请到手机相册查看"
});
},
fail: (e) => {
fail: (err) => {
uni.showModal({
content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
title: "保存视频到相册失败",
content: JSON.stringify(err),
showCancel: false
});
}
......
pages/tabBar/API.uvue
浏览文件 @ 12cdf3ca
......@@ -359,10 +359,10 @@
},
// #endif
// #ifdef APP
// {
// name: "拍摄视频或从相册中选择视频",
// url: 'choose-video'
// },
{
name: "拍摄视频或从相册中选择视频",
url: 'choose-video'
},
{
name: "保存视频到相册",
url: 'save-video-to-photos-album'
......@@ -373,10 +373,10 @@
name: "获取视频信息",
url: 'get-video-info'
},
// {
// name: "压缩视频",
// url: 'compress-video'
// },
{
name: "压缩视频",
url: 'compress-video'
},
// #endif
/* {
name: "图片选择和拍照",
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或