更新记录

1.0.1（2024-09-12） 下载此版本

修复H5报错Compressor is not defined 如果还是报错，可以尝试切换引入方式

import './compressor.min.js'
import Compressor from './compressor.min.js'

1.0.0（2024-09-11） 下载此版本

实现APP、小程序、H5图片压缩

平台兼容性

uni-app

uni-app x

watasi-compress(图片压缩，支持APP、H5、小程序)

APP、小程序使用uni.compressImage做压缩，H5使用compressorjs

使用说明

options

示例

<template>
    <view class="content">
        <block v-for="(item, index) in images" :key="index">
            <view class="cell">
                <view class="item">
                    <image :src="item.before" mode="aspectFit" class="img"></image>
                    <text class="text">压缩前：{{ item.size1 }}</text>
                </view>
                <view class="item">
                    <image :src="item.after" mode="aspectFit" class="img"></image>
                    <text class="text">压缩后：{{ item.size2 }}</text>
                </view>
            </view>
        </block>

        <button @click="onChoiseImage">选择图片</button>
    </view>
</template>

<script>
    import WCompress from '@/uni_modules/watasi-compress/js_sdk/index.js'
    export default {
        data() {
            return {
                images: []
            }
        },
        onLoad() {

        },
        methods: {
            onChoiseImage() {
                uni.chooseImage({
                    count: 9,
                    success: (res) => {
                        this.images = res.tempFilePaths.map((c, i) => {
                            return {
                                before: c,
                                size1: parseInt(res.tempFiles[i].size / 1024) + 'KB',
                                after: '',
                                size2: 0,
                            }
                        })
                        WCompress(res.tempFilePaths, {
                            success: (imgs) => {
                                imgs.map((c, i) => {
                                    // #ifndef H5
                                    uni.getFileInfo({
                                        filePath: c,
                                        success: (e) => {
                                            this.images[i].after = c
                                            this.images[i].size2 = parseInt(e.size / 1024) + 'KB'
                                        }
                                    })
                                    // #endif

                                    // #ifdef H5
                                    this.images[i].after = URL.createObjectURL(c)
                                    this.images[i].size2 = parseInt(c.size / 1024) + 'KB'
                                    // #endif
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .cell {
        display: flex;
        box-sizing: border-box;
        padding: 20rpx;
        .item {
            width: 50%;
            margin: 20rpx;
        }
        image, uni-image {
            max-width: 100%;
        }
    }
</style>

其他说明

• 当传入width或height时，如果图片原始尺寸小于传入的尺寸，可能导致压缩的图片变大