Taro微信小程序--压缩图片组件

图片压缩组件

ImageCompress 组件用于在Taro微信小程序中对图片进行压缩，以提高性能和优化加载。该组件利用了 Taro 框架来实现图片压缩功能。

1，用法

• 在页面导入ImageCompress组件。

import ImageCompress from 'path/to/ImageCompress';

• 传入指定参数

 <ImageCompress
   imageUrl="imgsrc"
   maxSize={1024}  // 压缩阈值大小
   pwidth={800}     // 压缩图像宽度
   pheight={80}     // 压缩图像高度
   imgStyle={{ width: '100%', height: 'auto' }}
 />

• 组件会根据指定的参数自动压缩所提供的图像。

2，参数

• imageUrl (string): 需要进行压缩的图片URL。
• maxSize (number): 最大文件大小阈值。如果图像超过此大小，将被压缩。
• pwidth (number): 图片压缩后的宽度。
• pheight (number): 图片压缩后的高度。
• imgStyle (object): Image组件的 CSS 样式。

注意：
只有图像超过 maxSize才会进行压缩。
压缩后的图片将替换 Image原始图像。

3，代码实现

import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Image} from '@tarojs/components'

class ImageCompress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      compressedImageUrl: null // 压缩后的图片地址
    };
  }

  componentDidMount() {
  }

  componentWillReceiveProps(){
    // 组件接收到新的props时执行的操作
    const { imageUrl, maxSize, pwidth, pheight } = this.props;
    if (imageUrl) {
      // 如果传入了图片地址，则进行图片压缩处理
      this.compressImage(imageUrl, maxSize, pwidth, pheight);
    }
  }

  compressImage = async (imageUrl, maxSize, pwidth, pheight) => {
    try {
      // 下载图片
      const res = await Taro.downloadFile({ url: imageUrl });
      const tempFilePath = res.tempFilePath;
      // 获取图片文件信息
      const { size } = await Taro.getFileInfo({ filePath: tempFilePath });
      if (size > maxSize) {
        // 如果图片大小超过指定的最大尺寸，则进行压缩
        const compressedFile = await Taro.compressImage({
          src: tempFilePath,
          compressedWidth: pwidth || 80, // 压缩后的宽度，默认为80
          quality: pheight || 80, // 压缩质量，默认为80
        });

        this.setState({ compressedImageUrl: compressedFile.tempFilePath }); // 设置压缩后的图片地址
      } else {
        // 如果图片大小未超过指定的最大尺寸，则直接使用原图
        this.setState({ compressedImageUrl: imageUrl }); // 设置原图地址
      }
    } catch (error) {
      console.error('Error compressing image:', error); // 打印压缩图片时出现的错误
    }
  }

  render() {
    const { compressedImageUrl } = this.state;
    const { imgStyle = '' } = this.props;

    return (
      <Image
        style={imgStyle}
        src={compressedImageUrl}
        alt='img'
      />
    );
  }
}

export default ImageCompress;