https://github.com/zentered/solid-image-crop
Solid.js simple image crop tool using Cropper.js
https://github.com/zentered/solid-image-crop
Last synced: 12 months ago
JSON representation
Solid.js simple image crop tool using Cropper.js
- Host: GitHub
- URL: https://github.com/zentered/solid-image-crop
- Owner: zentered
- License: mit
- Created: 2023-03-24T13:50:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-13T23:04:57.000Z (about 1 year ago)
- Last Synced: 2025-06-13T15:19:12.227Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 14.1 MB
- Stars: 9
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solid Image Crop
Solid.js simple image crop tool using
[Cropper.js](https://github.com/fengyuanchen/cropperjs).
## Installation
npm install @zentered/solid-image-crop
# or pnpm i @zentered/solid-image-crop
# or yarn add @zentered/solid-image-crop
## Usage
```jsx
import { createSignal } from 'solid-js'
import ImageUploadDialog from '@zentered/solid-image-crop'
function App() {
const [isOpen, setIsOpen] = createSignal(false)
function closeModal() {
setIsOpen(false)
}
function openModal() {
setIsOpen(true)
}
async function saveImage(file) {
// Upload the image to your server
console.log(file)
}
return (
<>
Open Dialog
>
)
}
export default App
```
### Uploading the cropped image
The `saveImage` function receives a `file` object with the cropped image data
encoded in `base64`. If you need a blob/buffer, check out this
[b64toBlob function](https://stackoverflow.com/a/16245768)
### Special Thanks
- projw-the-lessful, https://codepen.io/projw-the-lessful/pen/bJZKVW