如何在 ReactJS 中裁剪图像？

以下方法介绍了如何在 react 中裁剪图像。我们将使用react-image-crop包来实现这一点。

react-image-crop ist 是一个为 React 裁剪图像的工具，没有依赖关系。这个工具将帮助我们裁剪图像，它将图像作为源，在选择目标区域后，它将为我们提供裁剪后的尺寸。

方法：为了裁剪图像，我们使用了react-image-crop模块，该模块在裁剪图像方面非常流行。我们已经导入了那个模块并使用了这个包中的 ReactCrop 组件。在我们的主 App.js 文件中，我们使用了这个组件并将其作为子元素传递给我们选择文件的输入元素。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app demo

第 2 步：创建项目文件夹（即 demo）后，使用以下命令移动到该文件夹：

cd demo

项目结构：我们的项目结构将如下所示。

第 3 步：创建 ReactJS 应用程序后，使用以下命令安装 react-image-crop 包：

npm install react-image-crop

实现：在相应的文件中写下以下代码。

App.js

import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
  
function App() {
  const [src, setSrc] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });
  const [image, setImage] = useState(null);
  const [output, setOutput] = useState(null);
  
  const selectImage = (file) => {
    setSrc(URL.createObjectURL(file));
  };
  
  const cropImageNow = () => {
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');
  
    const pixelRatio = window.devicePixelRatio;
    canvas.width = crop.width * pixelRatio;
    canvas.height = crop.height * pixelRatio;
    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = 'high';
  
    ctx.drawImage(
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height,
    );
      
    // Converting to base64
    const base64Image = canvas.toDataURL('image/jpeg');
    setOutput(base64Image);
  };
  
  return (
    

      
         {
            selectImage(e.target.files[0]);
          }}
        />
        

        

        

          {src && (
            

              
              

              Crop
              

              

            
          )}
        
        
{output && }
      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出：

参考： https://www.npmjs.com/package/react-image-crop