更新media示例

pages.json

@@ -618,6 +618,54 @@
         "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",
       "style": {

pages/API/compress-image/compress-image.uvue

+<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

+<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

+<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

@@ -2,8 +2,11 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex:1">
   <!-- #endif -->
-    <image src="/static/uni.png" style="margin: 15px 100px;height:196px;width:196px;align-self:center;"></image>
-    <button style="margin: 15px;" @click="saveImage">将图片保存到手机相册</button>
+    <page-head :title="title"></page-head>
+    <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 -->
   </scroll-view>
   <!-- #endif -->
@@ -13,6 +16,7 @@
   export default {
     data() {
       return {
+        title: "saveImageToPhotosAlbum"
       }
     },
     methods: {
@@ -39,4 +43,13 @@
 </script>
 
 <style>
+  .margin-top-10 {
+    margin-top: 10px;
+  }
+
+  .image {
+    width: 196px;
+    height: 196px;
+    align-self: center;
+  }
 </style>

pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue

+<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

@@ -334,7 +334,7 @@
             name: '媒体',
             pages: [
               {
-                name: "拍照和相册选择",
+                name: "拍摄图片或从相册中选择图片",
                 url: 'choose-image'
               },
               {
@@ -348,6 +348,36 @@
                 url: 'save-image-to-photos-album'
               },
               // #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: "图片选择和拍照",
                 url: "image",