React Image File Resizer 使用教程

邓旭诚Kit

于 2024-08-31 08:17:41 发布

阅读量277

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00113/article/details/141738104

版权

React Image File Resizer 使用教程

react-image-file-resizer Resize Local Images with React 🌄 🌅项目地址:https://gitcode.com/gh_mirrors/re/react-image-file-resizer

项目介绍

react-image-file-resizer 是一个用于在 React 应用中调整图片文件大小的开源库。它允许开发者轻松地压缩和调整图片尺寸，非常适合需要优化图片上传大小和质量的应用场景。

项目快速启动

安装

首先，你需要在你的 React 项目中安装 react-image-file-resizer：

npm install react-image-file-resizer

基本使用

以下是一个简单的示例，展示如何在 React 组件中使用 react-image-file-resizer 来调整图片大小：

import React, { useState } from 'react';
import Resizer from 'react-image-file-resizer';

const ImageResizer = () => {
  const [resizedImage, setResizedImage] = useState(null);

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      Resizer.imageFileResizer(
        file,
        300, // 最大宽度
        300, // 最大高度
        'JPEG', // 输出格式
        100, // 质量
        0, // 旋转角度
        (uri) => {
          setResizedImage(uri);
        },
        'base64' // 输出类型
      );
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      {resizedImage && <img src={resizedImage} alt="Resized" />}
    </div>
  );
};

export default ImageResizer;