In case it’s of use to anyone finding this thread in the future, I’ve refactored and improved this into a React component available here.
I’ve cleaned up the code a lot and removed the b64toBlob() stuff and replaced it with a Polyfill for HTML5’s
canvas.toBlob() function that will eventually have native browser support. Oh and added proper support of PNG, JPG & WEBP.
Also made it customisable with props, only slingshot is required, they are: -
slingshot: slingshot Directive Name *required width: upload width height: upload height imageType: image MIME type, compatible with canvas.toBlob() imageQuality: image quality for JPG or WEBP, number 0.0 to 1.0 options: Jcrop options onError: on upload error callback(error, downloadURL) onSuccess: on upload success callback(downloadURL) setFilename: set upload filename callback(fileEvent)
So just call it wherever you need a cropper with: -
<Cropper slingshot="userUploads" />
As before you need an existing Slingshot setup and to install mrt:jquery-jcrop. Also this uses Semantic UI for its styling so if you don’t want to use it, you can go into the
render() function and tweak the markup however you need.
Anyhoo, might be useful to someone.