Package Exports
- @solakuroky/image-clipper
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@solakuroky/image-clipper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
image-clipper
image clipper
Screenshot
install
npm install @solakuroky/image-clipper
Usage
var imageClipper = require('@solakuroky/image-clipper')
var clippedImage = imageClipper('https://someimage.png')
<script type="text/javascript">
function cropImage(source) {
var file = source.files[0]
var clippedImage = imageClipper(file, {
callback: callback
})
}
function callback(canvas, resolve, reject) {
resolve(canvas.toDataUrl())
}
</script>
<input type="file" name="file" onchange="cropImage(this)" />
API
image-clipper
| name | type | default | description |
|---|---|---|---|
| image | String|FileObject | image to be clipped | |
| options | Object | {} | Configuration of clipper |
options
| name | type | default | description |
|---|---|---|---|
| callback | function(canvas, resolve, reject) | Customize how to process image, default return a file | |
| clipWidth | Number | 256 | width to be clipped |
| clipHeight | Number | 256 | height to be clipped |
| outlineWidth | Number | 32 | shadow width around clipping window |
| okText | String|ReactNode | 'ok' | text of the Ok button |
| cancelText | String|ReactNode | 'cancel' | text of the Cancel button |
| okStyle | Object | {} | style of the Ok button |
| cancelStyle | Object | {} | style of the Cancel button |
| windowStyle | Object | {} | style of the Cliper window |
License
image-clipper is released under the MIT license.