Image Editor

v2.5.0

we now have a full image editor that can "crop, zoom, flip, rotate", pretty much everything cropperjs offers + almost all of the filters of camanjs

v3.2.5

camanjs presets are added , except

• Layers
• Channels
• Colorize *
• Curves
• Fill Color *

v3.2.7

image comparison tool that supports zoom & drag thanx to vue-image-compare

Optimize Edited Images On Save

if you use any of the image optimizers that runs on the uploaded files you will surely miss that option as it's not possible to have the same over the editor result but gladly there is a way around that.

for example using spatie/laravel-image-optimizer we can run the optimization on the fly through an event like so

// doesnt work with cloud disk 
// https://github.com/spatie/laravel-image-optimizer/issues/40#issuecomment-356862905

Event::listen('MMFileSaved', function ($file_path, $mime_type) {
    app(\Spatie\ImageOptimizer\OptimizerChain::class)->optimize($file_path);
});

so every time you save an image

• it gets saved to disk
• then it gets optimized 💥 💪

Notes

• we don't apply the changes directly to the original image, instead you will get a new file with the same name + a random one to keep it unique.

• gif editing is not supported https://github.com/fengyuanchen/cropperjs/issues/45 😢

• for cropper or caman to work with cloud based images, u need to configure cross-origin headers docs / more info

Extra

• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/