@zentered/solid-image-crop
v1.1.1
Published
Solid.js simple image crop tool using Cropper.js
Downloads
34
Maintainers
Readme
Solid Image Crop
Solid.js simple image crop tool using Cropper.js.
Installation
npm install @zentered/solid-image-crop
# or pnpm i @zentered/solid-image-crop
# or yarn add @zentered/solid-image-crop
Usage
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 (
<>
<button type="button" onClick={openModal}>
Open Dialog
</button>
<ImageUploadDialog
title="Upload your logo"
isOpen={isOpen}
closeModal={closeModal}
openModal={openModal}
saveImage={saveImage}
/>
</>
)
}
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
Special Thanks
- projw-the-lessful, https://codepen.io/projw-the-lessful/pen/bJZKVW