Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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

更新media示例

上级 1a89cdd4
隐藏空白更改
内联 并排
Showing with 437 addition and 3 deletion
pages.json
浏览文件 @ b7f74f92
...@@ -618,6 +618,54 @@ ...@@ -618,6 +618,54 @@
"navigationBarTitleText": "图片" "navigationBarTitleText": "图片"
} }
}, },
// #ifdef APP-ANDROID
{
"path" : "pages/API/get-image-info/get-image-info",
"style" :
{
"navigationBarTitleText" : "获取图片信息"
}
},
{
"path" : "pages/API/compress-image/compress-image",
"style" :
{
"navigationBarTitleText" : "压缩图片"
}
},
// #endif
// #ifdef APP
// {
// "path" : "pages/API/choose-video/choose-video",
// "style" :
// {
// "navigationBarTitleText" : "拍摄视频或从相册中选择视频"
// }
// },
{
"path" : "pages/API/save-video-to-photos-album/save-video-to-photos-album",
"style" :
{
"navigationBarTitleText" : "保存视频到相册"
}
},
// #endif
// #ifdef APP-ANDROID
{
"path" : "pages/API/get-video-info/get-video-info",
"style" :
{
"navigationBarTitleText" : "获取视频信息"
}
},
// {
// "path" : "pages/API/compress-video/compress-video",
// "style" :
// {
// "navigationBarTitleText" : "压缩视频"
// }
// },
// #endif
{ {
"path": "pages/API/get-network-type/get-network-type", "path": "pages/API/get-network-type/get-network-type",
"style": { "style": {
......
pages/API/compress-image/compress-image.uvue 0 → 100644
浏览文件 @ b7f74f92
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="image-container">
<image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
<image class="image" :src="afterCompressPath" mode="aspectFit"></image>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前图片信息</text>
</view>
<text>{{beforeCompressImageInfo}}</text>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后图片信息</text>
</view>
<text>{{afterCompressImageInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressImage">压缩图片</button>
</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>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: "compressImage",
beforeCompressImageInfo: "",
afterCompressImageInfo: "",
beforeCompressPath: "",
afterCompressPath: "",
quality: 80,
compressedWidth: null as number | null,
compressedHeight: null as number | null,
width: "auto",
height: "auto",
rotate: 0
}
},
methods: {
compressImage() {
uni.compressImage({
src: this.beforeCompressPath,
quality: this.quality,
compressedWidth: this.compressedWidth,
compressedHeight: this.compressedHeight,
width: this.width,
height: this.height,
rotate: this.rotate,
success: (_res) => {
this.afterCompressPath = _res.tempFilePath;
uni.showToast({
title: "压缩成功",
icon: null
});
uni.getImageInfo({
src: _res.tempFilePath,
success: (res) => {
this.afterCompressImageInfo = `图片宽度: ${res.width}, 图片高度: ${res.height}`;
}
});
},
fail: (err) => {
uni.showModal({
title: "压缩失败",
content: JSON.stringify(err)
})
}
})
},
chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ["original"],
sourceType: ["album"],
success: (_res) => {
this.beforeCompressPath = _res.tempFilePaths[0];
uni.getImageInfo({
src: _res.tempFilePaths[0],
success: (res) => {
this.beforeCompressImageInfo = `图片宽度: ${res.width}, 图片高度: ${res.height}`;
}
});
}
});
},
onQualityInputConfirm(value : number) {
this.quality = value;
},
onCompressedWidthInputConfirm(value : number) {
this.compressedWidth = value;
},
onCompressedHeightInputConfirm(value : number) {
this.compressedHeight = value;
},
onWidthInputConfirm(value : string) {
this.width = value;
},
onHeightInputConfirm(value : string) {
this.height = value;
},
onRotateInputConfirm(value : number) {
this.rotate = value;
}
}
}
</script>
<style>
.image {
flex: 1;
}
.image-container {
flex-direction: row;
}
</style>
pages/API/get-image-info/get-image-info.uvue 0 → 100644
浏览文件 @ b7f74f92
<template>
<!-- #ifdef APP -->
<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 -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: "getImageInfo",
relativeImagePath: "/static/test-image/logo.png",
relativeImageInfo: "",
absoluteImagePath: "",
absoluteImageInfo: "",
remoteImagePath: "https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/img/building.jpg",
remoteImageInfo: "",
}
},
methods: {
chooseImage() {
uni.chooseImage({
count: 1,
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}`;
}
});
}
});
}
},
onReady() {
uni.getImageInfo({
src: this.relativeImagePath,
success: (res) => {
this.absoluteImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
}
});
uni.getImageInfo({
src: this.remoteImagePath,
success: (res) => {
this.remoteImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
}
});
}
}
</script>
<style>
.image {
align-self: center;
}
.margin-top-10 {
margin-top: 10px;
}
</style>
pages/API/get-video-info/get-video-info.uvue 0 → 100644
浏览文件 @ b7f74f92
<template>
<!-- #ifdef APP -->
<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>
<video class="video" :src="absoluteVideoPath"></video>
<text class="margin-top-10">{{absoluteVideoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">拍摄视频或从相册中选择视频</button>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: "getVideoInfo",
absoluteVideoPath: "",
absoluteVideoInfo: "",
}
},
methods: {
chooseVideo() {
uni.chooseVideo({
compressed: false,
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`;
}
});
}
});
}
}
}
</script>
<style>
.video {
align-self: center;
}
.margin-top-10 {
margin-top: 10px;
}
</style>
pages/API/save-image-to-photos-album/save-image-to-photos-album.uvue
浏览文件 @ b7f74f92
...@@ -2,8 +2,11 @@ ...@@ -2,8 +2,11 @@
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex:1"> <scroll-view style="flex:1">
<!-- #endif --> <!-- #endif -->
<image src="/static/uni.png" style="margin: 15px 100px;height:196px;width:196px;align-self:center;"></image> <page-head :title="title"></page-head>
<button style="margin: 15px;" @click="saveImage">将图片保存到手机相册</button> <view class="uni-padding-wrap">
<image class="image" src="/static/uni.png"></image>
<button class="margin-top-10" type="primary" @click="saveImage">将图片保存到手机相册</button>
</view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
...@@ -13,6 +16,7 @@ ...@@ -13,6 +16,7 @@
export default { export default {
data() { data() {
return { return {
title: "saveImageToPhotosAlbum"
} }
}, },
methods: { methods: {
...@@ -39,4 +43,13 @@ ...@@ -39,4 +43,13 @@
</script> </script>
<style> <style>
.margin-top-10 {
margin-top: 10px;
}
.image {
width: 196px;
height: 196px;
align-self: center;
}
</style> </style>
pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue 0 → 100644
浏览文件 @ b7f74f92
<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>
<button type="primary" class="margin-top-10" @click="saveVideo">将视频保存到手机相册</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: 'saveVideoToPhotosAlbum',
src: ''
}
},
methods: {
saveVideo() {
uni.saveVideoToPhotosAlbum({
filePath: this.src,
success: (_) => {
uni.showToast({
position: "center",
icon: "none",
title: "视频保存成功，请到手机相册查看"
});
},
fail: (e) => {
uni.showModal({
content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
showCancel: false
});
}
});
}
},
onReady() {
uni.showLoading({
title: '视频下载中'
});
uni.downloadFile({
url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',
success: (res) => {
console.log("download video success", res.tempFilePath);
this.src = res.tempFilePath;
uni.hideLoading();
}
});
}
}
</script>
<style>
.video {
align-self: center;
}
.margin-top-10 {
margin-top: 10px;
}
</style>
pages/tabBar/API.uvue
浏览文件 @ b7f74f92
...@@ -334,7 +334,7 @@ ...@@ -334,7 +334,7 @@
name: '媒体', name: '媒体',
pages: [ pages: [
{ {
name: "拍照和相册选择", name: "拍摄图片或从相册中选择图片",
url: 'choose-image' url: 'choose-image'
}, },
{ {
...@@ -348,6 +348,36 @@ ...@@ -348,6 +348,36 @@
url: 'save-image-to-photos-album' url: 'save-image-to-photos-album'
}, },
// #endif // #endif
// #ifdef APP-ANDROID
{
name: "获取图片信息",
url: 'get-image-info'
},
{
name: "压缩图片",
url: 'compress-image'
},
// #endif
// #ifdef APP
// {
// name: "拍摄视频或从相册中选择视频",
// url: 'choose-video'
// },
{
name: "保存视频到相册",
url: 'save-video-to-photos-album'
},
// #endif
// #ifdef APP-ANDROID
{
name: "获取视频信息",
url: 'get-video-info'
},
// {
// name: "压缩视频",
// url: 'compress-video'
// },
// #endif
/* { /* {
name: "图片选择和拍照", name: "图片选择和拍照",
url: "image", url: "image",
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或