El siguiente enfoque cubre cómo recortar imágenes en reaccionar. Usaremos el paquete react-image-crop para lograrlo.
El ist de react-image-crop es una herramienta para recortar imágenes para React sin dependencias. Esta herramienta nos ayudará a recortar imágenes, toma una imagen como fuente y después de seleccionar el área de destino nos proporcionará las dimensiones recortadas.
Enfoque: para recortar la imagen, hemos utilizado el módulo react-image-crop , que es muy popular para recortar imágenes. Importamos ese módulo y usamos el componente ReactCrop de este paquete. En nuestro archivo App.js principal, usamos este componente y lo pasamos como elemento secundario a nuestro elemento de entrada que elige archivos.
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app demo
Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:
cd demo
Estructura del proyecto: La estructura de nuestro proyecto se verá así.
Paso 3: después de crear la aplicación ReactJS, instale el paquete react-image-crop con el siguiente comando:
npm install react-image-crop
Implementación: Anote el siguiente código en los archivos respectivos.
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 (
<div className="App">
<center>
<input
type="file"
accept="image/*"
onChange={(e) => {
selectImage(e.target.files[0]);
}}
/>
<br />
<br />
<div>
{src && (
<div>
<ReactCrop src={src} onImageLoaded={setImage}
crop={crop} onChange={setCrop} />
<br />
<button onClick={cropImageNow}>Crop</button>
<br />
<br />
</div>
)}
</div>
<div>{output && <img src={output} />}</div>
</center>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:
Referencia: https://www.npmjs.com/package/react-image-crop
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA