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

``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

title="Upload your logo"
isOpen={isOpen}
closeModal={closeModal}
openModal={openModal}
saveImage={saveImage}
/>

)
}

export default App
`

$3

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

$3

- projw-the-lessful, https://codepen.io/projw-the-lessful/pen/bJZKVW