Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gobinath-b/image-crop-js-p5
https://github.com/gobinath-b/image-crop-js-p5
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gobinath-b/image-crop-js-p5
- Owner: Gobinath-B
- Created: 2024-02-09T08:39:24.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-09T09:53:24.000Z (11 months ago)
- Last Synced: 2024-10-29T21:03:53.813Z (2 months ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Image Crop P5Wrapper
Image Crop P5Wrapper is a React component that allows users to crop images using the p5.js library.
## Author
Gobinath B
## Installation
You can install the package via npm:
```bash
npm install image-crop-p5wrapper# Usage
Please make sure that the prop image is in file type!
import React, { useState } from 'react';
import { CropImage } from 'image-crop-p5wrapper';function App() {
const [undoFile, setUndoFile] = useState(null);
const [cropped, setCropped] = useState(false);
const [file, setFile] = useState(null);return (
{
const mime = image.split(";")[0].split(":")[1];
const blob = await (await fetch(image)).blob();
const newFile = new File([blob], file.name, { type: mime });
setUndoFile(file);
setCropped(true);
setFile(newFile);
}}
resetImage={() => {
if (undoFile) {
setCropped(false);
setFile(undoFile);
}
}}
/>
);
}export default App;