更新记录

1.0.0（2025-03-11） 下载此版本

上传

平台兼容性

mosowe-image-heic

app 端图片格式转换

props

emits

expose

示例

<template>
  <view class="common-page">
    <view class="page-item">
      <mosowe-button @click="chooseImage">选择单个heic/heif/webp图片</mosowe-button>
    </view>
    <view class="page-item">
      <mosowe-button @click="chooseImage(3)">选择多个heic/heif/webp图片</mosowe-button>
    </view>
    <view class="h3-title">进度：{{ progress }}%</view>
    <view class="progress">
      <view
        class="slide"
        :style="`width:${progress}%`"></view>
    </view>
    <view class="page-item">
      <view class="h3-title">未处理</view>
      <template v-for="item in imageOld">
        <view class="file-path">{{ item.split('/').reverse()[0] }}</view>
        <mosowe-image
          :src="item"
          preview
          :width="200"
          :height="200"
          :round="30"></mosowe-image>
      </template>
    </view>
    <view class="page-item">
      <view class="h3-title">已处理:{{ dealTime }}s</view>
      <template v-for="item in imageDeal">
        <view class="file-path">{{ item.split('/').reverse()[0] }}</view>
        <mosowe-image
          :src="item"
          preview
          :width="200"
          :height="200"
          :round="30"></mosowe-image>
      </template>
    </view>
    <mosowe-image-convert
      ref="mosoweImageHeicRef"
      @progress="Change"></mosowe-image-convert>
  </view>
</template>

<script
  setup
  lang="ts">
  import { ref } from 'vue';
  const imageOld = ref([]);
  const imageDeal = ref([]);
  const dealTime = ref(0);
  const mosoweImageHeicRef = ref<any>(null);
  const progress = ref(0);
  const Change = (num: number) => {
    progress.value = num;
  };
  const chooseImage = (count: number = 1) => {
    dealTime.value = 0;
    imageOld.value = [];
    imageDeal.value = [];
    progress.value = 0;
    uni.chooseImage({
      count,
      success: (res) => {
        imageOld.value = res.tempFilePaths;
        uni.showLoading({
          title: '转换中...',
          mask: true
        });
        let t = Date.now();
        if (count === 1) {
          mosoweImageHeicRef.value
            ?.heicAsync(imageOld.value[0])
            .then((res) => {
              imageDeal.value = [res.data];
            })
            .catch((err) => {
              console.log('heicAsync', JSON.stringify(err));
            })
            .finally(() => {
              uni.hideLoading();
              dealTime.value = (Date.now() - t) / 1000;
            });
        } else {
          mosoweImageHeicRef.value
            ?.heicListAsync(imageOld.value)
            .then((res) => {
              imageDeal.value = res.data;
            })
            .catch((err) => {
              console.log('heicListAsync', JSON.stringify(err));
            })
            .finally(() => {
              uni.hideLoading();
              dealTime.value = (Date.now() - t) / 1000;
            });
        }
      }
    });
  };
</script>

<style
  lang="scss"
  scoped>
  .file-path {
    font-size: 28rpx;
    color: #666;
    line-height: 36rpx;
    word-break: break-all;
  }
  .progress {
    width: 100%;
    height: 8rpx;
    background-color: $uni-text-color-grey;
    border-radius: 4rpx;
    .slide {
      width: 0;
      height: 100%;
      background-color: $uni-color-primary;
      border-radius: 4rpx;
    }
  }
</style>