fix:兼容加载失败时&没数据时，页面显示暂无数据

chensiAb

2024-08-23 9d5803a79aad859e201b94040e369298c7c348b0

 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);
                    }
                });
            };
@@ -57,14 +64,40 @@
                src: tempPath,
                success: res => {
                    const size = this._limitSize(res);
                    const drawSet = this._creatDrawSet(res, size);
                    this._drawImage(tempPath, drawSet, compress => {
                        this.imgBlobs.push({
                            source: tempPath,
                            compress,
                    // 网页图片压缩
                    if (process.env.TARO_ENV === 'h5') {
                        const drawSet = this._creatDrawSet(res, size);
                        this._drawImage(tempPath, drawSet, compress => {
                            this.imgBlobs.push({
                                source: tempPath,
                                compress,
                            });
                            callback();
                        });
                        callback();
                    });
                    }
                    // 小程序图片压缩
                    else if (process.env.TARO_ENV === 'weapp') {
                        Taro.compressImage({
                            src: tempPath,
                            quality: 60,
                            compressedWidth: size[0],
                            compressHeight: size[1],
                            success: cps => {
                                this.imgBlobs.push({
                                    source: tempPath,
                                    compress: cps.tempFilePath,
                                });
                                callback();
                            },
                            fail: err => {
                                this.imgBlobs.push({
                                    source: tempPath,
                                    compress: tempPath,
                                });
                                callback();
                            },
                        });
                    }
                },
            });
        },
@@ -73,12 +106,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];
@@ -86,13 +119,10 @@
        _setCanvasSize(width, height) {
            this.cavWidth = width;
            this.cavHeight = height;
            if (process.env.TARO_ENV === 'h5') {
                $(this.$refs.canvas.$el)
                    .find('canvas')
                    .attr('width', width)
                    .attr('height', height);
            }
            // TODO: 小程序中的 canvas 重设
            $(this.$refs.canvas.$el)
                .find('canvas')
                .attr('width', width)
                .attr('height', height);
        },
        _creatDrawSet(res, [width, height]) {
            const orientation = res.orientation || 'up';
@@ -133,7 +163,23 @@
                const [key, params] = step;
                if (key === 'drawImage') {
                    // 使用图片
                    const img = new Image();
                    const img = (() => {
                        if (typeof Image === 'undefined') {
                            console.log(this.$refs.canvas);
                            console.log($('canvas[canvas-id=' + this.cavId + ']'));

                            const query = Taro.createSelectorQuery();
                            query
                                .select('canvas[canvas-id=' + this.cavId + ']')
                                .boundingClientRect()
                                .exec(res => {
                                    console.log(res);
                                });
                            return this.$refs.canvas.createImage();
                        } else {
                            return new Image();
                        }
                    })();
                    img.src = tempPath;
                    this.canvasContext.drawImage(img, ...params);
                } else {