优化图片压缩细节，优惠图片上传组件预览

Tevin

2021-06-21 2794927ea5a697a1e514a7c9cc204273db7f32c1

优化图片压缩细节，优惠图片上传组件预览

 forms/imagePicker/CImageCompressor.vue

@@ -20,6 +20,12 @@

export default {
    name: 'CImageCompressor',
    props: {
        maxSize: {
            type: Number,
            default: 1600,
        },
    },
    data() {
        return {
            // canvas id
@@ -33,6 +39,7 @@
    },
    methods: {
        $compress(tempPaths, callback) {
            this.imgBlobs = []; // 重置已转图片
            if (typeof this.canvasContext === 'undefined') {
                this.canvasContext = Taro.createCanvasContext(this.cavId, this);
            }
@@ -46,7 +53,7 @@
                    }
                    // 完成图片压缩
                    else {
                        console.log(this.imgBlobs);
                        callback(this.imgBlobs);
                    }
                });
            };
@@ -73,12 +80,12 @@
            let width, height;
            // 宽大于高，按宽算
            if (res.width >= res.height) {
                width = Math.min(res.width, 1600);
                width = Math.min(res.width, this.maxSize);
                height = Math.round(width / rate);
            }
            // 按高算
            else {
                height = Math.min(res.height, 1600);
                height = Math.min(res.height, this.maxSize);
                width = Math.round(height * rate);
            }
            return [width, height];

 forms/imagePicker/CImagePicker.vue

@@ -23,18 +23,6 @@
            :onFail="evt=>handleFail(evt)"
            :onImageClick="(index, file)=>handleImgView(index,file)"
        />
        <AtCurtain
            class="c-image-picker-view"
            closeBtnPosition="top-right"
            :isOpened="showImg"
            :onClose="evt=>handleImgClose()"
        >
            <image
                class="img"
                mode="aspectFit"
                :src="curtainImg"
            />
        </AtCurtain>
        <CImageCompressor ref="compressor" />
    </view>
</template>
@@ -60,10 +48,7 @@
        itemRes: Object,
    },
    data() {
        return {
            showImg: false,
            curtainImg: '',
        };
        return {};
    },
    computed: {
        files() {
@@ -93,7 +78,7 @@
            // 添加图片
            if (operationType === 'add') {
                const needs = files
                    .map((file, index) => {
                    .map((file, needIndex) => {
                        const fileInfo = file.file;
                        // 没有 file 信息对象，或者不是 blob 类型
                        if (!fileInfo || fileInfo.path.indexOf('blob') < 0) {
@@ -103,19 +88,18 @@
                        if (fileInfo.size < 1 * 1024 * 1024) {
                            return false;
                        }
                        return [fileInfo, index];
                        return [fileInfo, needIndex];
                    })
                    .filter(Boolean);
                // 存在需要压缩的图片，一次性压缩
                if (needs.length > 0) {
                    const files2 = [...files];
                    const needPath = needs.map(need => need[0].path);
                    this.$refs.compressor.$compress(needPath, compressedFiles => {
                        compressedFiles.forEach((cpFile, index) => {
                            const filesIndex = needs[index][1];
                    const needPaths = needs.map(need => need[0].path);
                    this.$refs.compressor.$compress(needPaths, compressedFiles => {
                        compressedFiles.forEach((cpPath, cpIndex) => {
                            const filesIndex = needs[cpIndex][1];
                            files2[filesIndex] = {
                                url: cpFile.path,
                                file: cpFile,
                                url: cpPath.compress,
                            };
                        });
                        this.triggerChange(files2);
@@ -132,8 +116,13 @@
            }
        },
        handleImgView(index, file) {
            this.curtainImg = file.url;
            this.showImg = true;
            const urls = this.files
                .map(file => (file.type === 'btn' ? false : file.url))
                .filter(Boolean);
            Taro.previewImage({
                current: file.url, // 当前显示图片的http链接
                urls, // 需要预览的图片http链接列表
            });
        },
        handleImgClose() {
            this.showImg = false;

 forms/imagePicker/cImagePicker.scss

@@ -20,8 +20,13 @@
            padding: 18px 18px 0 0;
        }
        .at-image-picker__preview-img {
            text-align: center;
            background-color: #f8f8f8;
            position: relative;
            background-color: #f2f2f2;
            img {
                display: block;
                @include position(absolute, 50% 50% n n);
                transform: translate(-50%, -50%);
            }
        }
        .at-image-picker__choose-btn {
            .add-bar {