save-media.vue
3.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view v-if="imagePath !== ''" class="media-box image">
<image class="image" mode="widthFix" :src="imagePath" />
</view>
<button type="primary" class="uni-button" @click="saveImage">拍摄图片并保存到本地</button>
<view v-if="videoPath !== ''" class="media-box">
<video
id="myVideo"
:src="videoPath"
@error="videoErrorCallback"
enable-danmu
danmu-btn
controls
></video>
</view>
<button type="primary" class="uni-button" @click="saveVideo">录制视频并保存到本地</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'saveImage/saveVideo',
imagePath: '',
videoPath: ''
};
},
onLoad() {},
methods: {
videoErrorCallback: function() {
uni.showModal({
content: '视频加载失败',
showCancel: false
});
},
saveImage() {
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: res => {
this.imagePath = res.tempFilePaths[0];
this.getTempFilePath(res.tempFilePaths[0], 'imageTempPath');
},
fail: (err) => {
// #ifdef MP
uni.getSetting({
success: (res) => {
let authStatus = res.authSetting['scope.camera'];
if (!authStatus) {
uni.showModal({
title: '授权失败',
content: 'Hello uni-app需要从您的相机获取图片，请在设置界面打开相关权限',
success: (res) => {
if (res.confirm) {
uni.openSetting()
}
}
})
}
}
})
// #endif
}
});
},
saveVideo() {
let _this = this;
uni.chooseVideo({
count: 1,
sourceType: ['camera'],
success: res => {
console.log(res.tempFilePath)
this.videoPath = res.tempFilePath;
this.getTempFilePath(res.tempFilePath, 'videoTempPath');
},
fail: (err) => {
// #ifdef MP
uni.getSetting({
success: (res) => {
let authStatus = res.authSetting['scope.camera'];
if (!authStatus) {
uni.showModal({
title: '授权失败',
content: 'Hello uni-app需要从您的相机获取视频，请在设置界面打开相关权限',
success: (res) => {
if (res.confirm) {
uni.openSetting()
}
}
})
}
}
})
// #endif
}
});
},
getTempFilePath(url, types) {
// 如果已经下载本地路径，那么直接储存
let obj = {
filePath: url,
success: () => {
console.log('save success');
uni.showModal({
content: '保存成功',
showCancel: false
});
uni.hideLoading();
},
fail: e => {
uni.hideLoading();
uni.showModal({
content: '保存失败',
showCancel: false
});
}
};
uni.showLoading({
title: '保存中...'
});
if (types === 'videoTempPath') {
uni.saveVideoToPhotosAlbum(obj);
} else {
uni.saveImageToPhotosAlbum(obj);
}
}
}
};
</script>
<style>
.media-box {
display: flex;
justify-content: center;
align-items: center;
margin: 30rpx 0;
width: 100%;
}
.image {
height: 400rpx;
overflow: hidden;
}
.image image {
width: 100%;
height: 100%;
}
video {
width: 100%;
}
.uni-button {
margin: 30rpx 0;
}
</style>