+
- <br />The main points arethelicense,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.
+ <br />The main points are:
</p>
<ul><li> license;
</li><li> project activity and recent maintenance;
</li><li> bundle size;
</li><li> browser and mobile support;
</li><li> accessibility;
</li><li> Vue compatibility;
</li><li> image quality;
</li><li> integration effort; and
</li><li> long-term maintenance.
<p>
</li></ul><br />Existing use in Tiki or WikiSuite should also count in an option's favor. It is also useful to check whether established upload or image-management projects use the same library.
- <br />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.
+ <br />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.
- <p>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.
+ <p>The current MR shows that it can be integrated with the File Gallery uploader.
</p>
<p>Cropper.js supports the main operations needed here, including cropping, rotation, scaling, and flipping. Basic effects can still be applied when rendering the final result with Canvas.
</p>
<p>The trade-off 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.
</p>
<p>Cropper.js is also used by Uppy in its official image editor plugin:
<br /><a class="wiki external" target="_blank" title="External link" href="https://uppy.io/docs/image-editor/" rel="external">Uppy Image Editor</a><img src="img/icons/green_question.png" alt="Question" width="16" height="16" name="link-external" title="Question" class="icon" />
</p>
<p>This is useful as an external example of Cropper.js being used as part of an established upload workflow.
</p>
<p>Reference:
<br /><a class="wiki external" target="_blank" title="External link" href="https://github.com/fengyuanchen/cropperjs" rel="external">Cropper.js</a><img src="img/icons/green_question.png" alt="Question" width="16" height="16" name="link-external" title="Question" class="icon" />
- <br />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 theH5P-specific parts.
+ <br />The H5P integration already ships image-editing code based on Darkroom.js and Fabric.js.
</p>
<p>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.
</p>
<p>Reusing it would require separating the H5P-specific parts and maintaining that integration separately.
</p>
<p>Darkroom.js itself is discontinued:
<br /><a class="wiki external" target="_blank" title="External link" href="https://github.com/MattKetmo/darkroomjs" rel="external">Darkroom.js</a><img src="img/icons/green_question.png" alt="Question" width="16" height="16" name="link-external" title="Question" class="icon" />
</p>
<p>Fabric.js is still active and can be used independently:
<br /><a class="wiki external" target="_blank" title="External link" href="https://fabricjs.com/" rel="external">Fabric.js</a><img src="img/icons/green_question.png" alt="Question" width="16" height="16" name="link-external" title="Question" class="icon" />
</p>
<p>Fabric.js is a general-purpose canvas library, not a ready-made image cropper. Tiki would still need to build much of the editing interface and interaction logic.
</p>
<p>Reference:
<br /><a class="wiki external" target="_blank" title="External link" href="https://doc.tiki.org/H5P" rel="external">Tiki H5P documentation</a><img src="img/icons/green_question.png" alt="Question" width="16" height="16" name="link-external" title="Question" class="icon" />
- <br />Canvas works well for effects andforexporting the edited image,and itdoesnotadd a dependency. The downside isthat Tiki wouldhave to maintain all crop selection, transform, mouse,touch, and preview behavioritself. That is much more custom codethan using Canvas only for final rendering.
+ <br />The browser Canvas API works well for applying effects and exporting the edited image. It also avoids adding another dependency.
+The downside is that Tiki would have to maintain the crop selection, transforms, mouse interactions, touch interactions, previews, controls, and other editor behavior itself.
+
+
+That would require much more custom code than using Canvas mainly for final rendering.
+
+
+Reference:
+
MDN Canvas API
+
+
+TOAST UI Image Editor
+
TOAST UI Image Editor provides cropping, rotation, flipping, filters, drawing, text, masks, and other editing tools.
+
+It covers the required features, but it provides much more functionality than the current Tiki use case needs.
+
+
+It would also add a larger editor interface and more code to the uploader. Recent maintenance activity is limited, which makes it less attractive as a new dependency.
+
+
+References:
+
TOAST UI Image Editor
+
TOAST UI Image Editor on npm
+
+
+Filerobot Image Editor
+
+
Filerobot Image Editor is an MIT-licensed image editor with cropping, rotation, filters, text, shapes, and other tools.
+
+
+It is actively maintained, but it offers more functionality than we currently need.
+
+
+Its integrations are also mainly focused on React, so using it in the Vue uploader would require extra integration work.
+
+
+Reference:
+
Filerobot Image Editor
+
+
+Croppie
+
+
Croppie is a small MIT-licensed cropping library.
+
+
+It is mainly focused on cropping and does not cover the full set of operations required for this implementation.
+
+
+Its recent maintenance activity is also limited.
+
+
+References:
+
Croppie
+
Croppie on npm
+
+
+vue-advanced-cropper
+
+
vue-advanced-cropper is designed specifically for Vue and would fit naturally into a Vue component.
+
+
+However, it mainly focuses on cropping and does not provide the full set of image editing features needed here.
+
+
+Its recent release activity is also limited.
+
+
+References:
+
vue-advanced-cropper
+
vue-advanced-cropper on npm
+
+
+Konva.js
+
+
Konva.js is an active MIT-licensed 2D canvas framework.
+
+
+It provides useful tools for creating image and drawing interfaces, but it is more general than needed for this feature.
+
+
+As with Fabric.js or native Canvas, Tiki would still need to build most of the image editing interface and behavior.
+
+
+Reference:
+
Konva.js
+
+
+Pintura
+
+
Pintura is a complete image editor with cropping, rotation, filters, annotations, and other features.
+
+
+Technically, it covers the requirements well, but it uses a commercial license.
+
+
+The licensing model does not meet the requirements for adding it as a dependency to Tiki.
+
+
+References:
+
Pintura
+
Pintura license
+
Pintura pricing
+
+
+Other options checked
+
+
We also reviewed a few other libraries.
+
+
+Jcrop
+
+
Jcrop is an older jQuery-based cropping library.
+
+
+It mainly provides crop selection and does not cover the full set of required image operations.
+
+
+It is also not a good fit for a new Vue-based implementation.
+
+
+Reference:
+
Jcrop
+
+
+imgAreaSelect
+
+
imgAreaSelect is another older jQuery-based image selection and cropping plugin.
+
+
+It does not provide the required rotation, flipping, or effects.
+
+
+Reference:
+
imgAreaSelect
+
+
+CamanJS
+
+
CamanJS focuses mainly on image filters.
+
+
+It does not provide a complete crop-and-transform workflow and is no longer actively maintained.
+
+
+Reference:
+
CamanJS
+
+
+react-easy-crop
+
+
react-easy-crop is actively maintained and provides a good cropping interface.
+
+
+However, it is built for React, while the current File Gallery uploader uses Vue.
+
+
+Using it would introduce another frontend framework for a relatively small feature.
+
+
+Reference:
+
react-easy-crop
+
+
+ngx-image-cropper
+
+
ngx-image-cropper is actively maintained and provides image cropping for Angular applications.
+
+
+It is designed for Angular and therefore does not fit the current Vue-based uploader.
+
+
+Reference:
+
ngx-image-cropper
+
+
- <br />Cropper.js looks like the strongest option so far.It removesmost ofthe custom croplogic and is easier to reusehere than theH5Peditor.This remains a preliminaryviewuntil the remainingalternativesandbundleimpact are checked and theTiki developer communityhas had a chance to comment.</p>
+ <br />Cropper.js still looks like the strongest option so far.]]>
</p>
<p>It provides the crop and transform behavior that would otherwise require some custom code, while staying focused on the main needs of this feature.
</p>
<p>It has several advantages:
</p>
<ul><li> MIT license;
</li><li> active maintenance;
</li><li> framework-independent design;
</li><li> support for the main crop and transform operations;
</li><li> straightforward use inside a Vue component;
</li><li> an existing implementation in merge request !10413; and
</li><li> use by Uppy in its official image editor plugin.
<p>
</li></ul><br />The additional alternatives do not currently provide a clear advantage.
</p>
<p>Fabric.js, Konva.js, and native Canvas would require more custom interface code.
</p>
<p>TOAST UI Image Editor and Filerobot provide more editing functionality than is currently needed.
</p>
<p>Croppie and vue-advanced-cropper do not cover all the required operations.
</p>
<p>Pintura is a complete solution, but its commercial licensing does not fit the project requirements.
</p>
<p>The older jQuery-based libraries are also not good candidates for a new Vue-based implementation.
</p>
<p>The current approach of using Cropper.js for crop and transform behavior, then Canvas for final rendering and effects, appears to provide a reasonable balance between adding a dependency and avoiding too much custom code.
</p>