Cropper tool

[woahdae]

Summary

We are a small nonprofit helping underserved children access enriching educational experiences. Help us serve these families and create an open source tool that will benefit the broader community while you're at it!

We have been unavailable to find a plain-javascript cropper tool that works with Rails out of the box, is simple to use, and allows to expand the canvas rather than force a crop if the uploaded image dimensions differ from the website's required dimensions.

We'd like to pay to have this completed as a fixed price bid, and you will be able to release the completed project as a separate open-source gem under your authorship (if you like, not required).

We want to use cropperjs v2, activestorage, image_processing (& vips), and activejob if applicable, to make the image cropper tool. It'll be similar to most cropping tools, but Rails-ready and able to increase the effective canvas height of the uploaded image to match predefined dimensions and use a chosen fill color for the added space.

Our existing tool, and brief description of what we'd like instead:

Screen.Recording.2023-02-22.at.11.50.13.AM.mp4

 

Specifications

• Tool must be used inside of an otherwise normal form, and image will be submitted with other multipart form data.
• Support multiple instances on a single form.
• Images will not be uploaded until form is submitted.
• Any image thumbnail processing will happen using activejob, although I think the image_processing gem might handle cropping lazily, in which case this would not be applicable.
• Image fields will specify dimensions, and users will only be able to crop to those dimensions.
• When an image is dropped/selected , tool will default to showing the full width of the image, with no fill color. This represents no cropping.
• Users will be able to remove the image, existing or just selected, via a button, but will not delete the image (if already saved) until the form is submitted.
• Gracefully refuse to process too-large files or unknown filetypes.
• System/capybara tests for parts that don't require complex javascript interactions, i.e. no tests needing to drag the crop box & assert a crop (unless you know how to do this in a straightforward manner), but do test uploading works, weird filetypes show an error, etc.
• Once the above is implemented, we are hoping for users to be able to select a background fill color using an html color input, hopefully with an eyedropper to match colors in a logo. Our project estimate includes completing this, but the other features take priority.

References

Recently a youtube video was produced showing cropperjs v1 and activestorage. Since cropperjs v1 is in maintenance mode, we'd like to attempt cropperjs v2 for future-proofing (plus the other features mentioned).

https://www.youtube.com/watch?v=Ith6FA0kxPc

Proposal parameters

Use this project to add two image fields, primary_image and logo, to the Product CRUD actions following the specifications above.

Please provide a fixed bid price for this project and a roadmap for completion. Bid and timeline should include up to two refinement revisions at the request of the client. See draft roadmap for example.

We'd like to see not just the uploader, but real-world usage in the Product show page with a scaled thumbnail.

If you opt to make it open source after the contract end, we prefer the MIT open source license, but if you'd like to suggest another, include that in your bid.

Draft roadmap

• Implement one uploader following the video with cropperjs v1 (& commit)
• Upgrade to cropperjs v2 (& commit)
• Make any changes required for a second uploader (& commit)
• Add clear/delete button (& commit)
• Get feedback about work in progress via PR
• Add background color selector.