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>