Status

This comparison is still a draft. The Cropper.js version in merge request !10413 is part of this evaluation, not a final decision.

Related links:

• Image manipulation request:https://dev.tiki.org/item1767
• Merge request !10413
• How to pick a software library

1. What we need

The goal is to let someone make basic changes to an image before uploading it to a Tiki File Gallery.

The first version should:

• work with JPEG, PNG, and WebP files;
• crop, rotate, and flip images, with a few basic effects;
• work inside the existing Vue uploader and Bootstrap interface;
• return a normal File to the current upload process;
• keep useful image quality and resolution;
• be usable on desktop and mobile; and
• use a Tiki-compatible license and be reasonably maintainable.

2. What to compare

The main points are the license, project activity, bundle size, browser and mobile support, accessibility, Vue compatibility, image quality, integration effort, and long-term maintenance. Existing use in Tiki or WikiSuite should also count in an option's favor.

3. Options

Cropper.js 2.1.1

Cropper.js is focused on cropping and image transforms. It handles the difficult selection and transform logic, works independently of a particular framework, and is MIT licensed. The current MR shows that it can be integrated with the File Gallery uploader.

The tradeoff is that it would be a new Tiki dependency. Tiki still needs to provide the modal, controls, mobile layout, accessibility, effects, and upload integration. Canvas is also still used to render the final image and turn it back into a file.

Tiki's H5P image editor

The H5P integration already ships image-editing code based on Darkroom.js and Fabric.js. However, that code expects the H5P editor environment and its globals and assets. It is not a standalone component that the Vue uploader can import directly, so reusing it would require separating and maintaining the H5P-specific parts.

Native Canvas

Canvas works well for effects and for exporting the edited image, and it does not add a dependency. The downside is that Tiki would have to maintain all crop selection, transform, mouse, touch, and preview behavior itself. That is much more custom code than using Canvas only for final rendering.

4. Current view

Cropper.js looks like the strongest option so far. It removes most of the custom crop logic and is easier to reuse here than the H5P editor. This remains a preliminary view until the remaining alternatives and bundle impact are checked and the Tiki developer community has had a chance to comment.